vue webpack 打包静态服务器资源之后页面丢失css

之前开发一个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