之前开发一个vue项目, 打包丢服务器之后, 发现页面 vue单文件 内写的 style 标签内的 css 全部无法加载.
直接抛解决办法
nginx 的 MIME 没配置, 返回的 js 文件, css 文件 都是 text/plain ,
正确的配置应该是这里: github : nginx.mime.types
注: 脚手架直接是 vue-cil
接下面是我排除问题的思路爱看不看.
问题还原过程:
npm run build
之后,把整个 dist 目录丢nginx服务器上, 然后发现 页面 css 全部丢失. 然后把 dist 目录在本地 localhost 跑一遍是正常的.
问题排除
项目根目录下 config/index
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
一开始以为是 assetsPublicPath 的问题, 把 '/' 改成 './'
问题依旧, 排除这个.
vue-router?
由于用了 vue 的 router, 并且开启 history 模式
所以参考了 vue-router
nginx
location / {
try_files $uri $uri/ /index.html;
}
问题依旧, 排除, 但这个还是要配置的.
最后就是发现文章前面说的问题.是我通过 Chrome 的 network . 看了一眼js 文件返回的
Response Headers
Content-Type:text/plain
// 正确应该是
// Content-Type:application/x-javascript
