之前開發(fā)一個vue項目, 打包丟服務器之后, 發(fā)現頁面 vue單文件 內寫的 style 標簽內的 css 全部無法加載.
直接拋解決辦法
nginx 的 MIME 沒配置, 返回的 js 文件, css 文件 都是 text/plain ,
正確的配置應該是這里: github : nginx.mime.types
注: 腳手架直接是 vue-cil
接下面是我排除問題的思路愛看不看.
問題還原過程:
npm run build
之后,把整個 dist 目錄丟nginx服務器上, 然后發(fā)現 頁面 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;
}
問題依舊, 排除, 但這個還是要配置的.
最后就是發(fā)現文章前面說的問題.是我通過 Chrome 的 network . 看了一眼js 文件返回的
Response Headers
Content-Type:text/plain
// 正確應該是
// Content-Type:application/x-javascript
