记录vue项目上线遇到的一些问题
1. 静态资源路径不对，在开发模式下正常，打包到服务器上的时候，发现静态资源全部请求不到
原因：开发模式下，本地静态服务器直接从项目目录直接起的，跟static是同目录，写绝对路径没问题，直接localhost:8080/static/***什么的都没问题，npm run build出来的问题件是index.html和static同级，但是你部署服务器的时候，很有可能不是在服务器的根目录，这个时候只能用相对位置
解决：修改config/index.js文件assetsPublicPath字段
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './'
}
2.css中大图片路径不对，开发模式下正常
原因：打包后css文件会打包到static/css目录下，然而css中写的路径为相对路径，部署到服务器上的时候会将在原有的路径上加上static/css，比如static/css/static/img/a.png，这是因为我们使用 ExtractTextPlugin 插件，从所有构建的js文件抽离css生成一个单独的app.css文件，在js文件的地址是 ./static/img/a.png（注：地址不再你你vue源码中的相对路径，源码中比如是：../../../static/img/a.png）,现在这个图片被抽离到app.css中，图片地址没有进行处理（直接复制过来），通过app.css来访问图片的地址就是：app.css 地址 + 图片的相对路径 = xxx.com/static/css + ./static/img/a.png = xxx.com/static/css/static/img/a.png，修改方法就是从app.css文件向上跳2级目录，去到static的根目录(我这里是网站的根目录)
解决：修改build/utils.js文件的publicPath为
if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' }) } else { return ['vue-style-loader'].concat(loaders) }
3.app.js文件过大
原因：所有的模块没有懒加载，直接打包到app.js中，请求的时候会进行全部加载
解决：vue提供了路由懒加载，只会加载当前路由需要的模块，其他模块只有在需要的时候才会进行加载，就像下边这样子写
const Home = resolve => require([ './home.vue' ], resolve) const router = [ { path: '/home', name: 'home', component: Home } ] export default { router }
路由这样子配置后再打包时候会将app.js进行拆分，比如下方多出了0,1,2这三个模块
static/js/0.5164e09da0419db62ee7.js 12.3 kB [emitted]
static/js/2.b600d06b55e36faa8138.js 7.13 kB [emitted]
static/js/1.4301e390162e718f7d7f.js 8.46 kB [emitted]
static/js/DrawingManager.js 14.4 kB [emitted]
static/js/app.74539da84116f2e87ba3.js 76.6 kB [emitted]
4.首屏加载慢
原因：比如即使做了路由懒加载，打包出来的app依旧很大,项目中用到的图片文件还是很大，请求的时候还是很费时间
解决：webpack在打包的时候将文件打包成gzip格式进行压缩，一般的静态资源服务器会默认开启gzip，如果在请求静态资源的时候，服务器发现有gzip格式会优先发gzip格式的，浏览器获取到gzip格式的资源再进行解压，这样可以减少传输的体积，首先
安装 compression-webpack-plugin
npm install --save-dev compression-webpack-plugin
然后，修改config/index.js文件
productionGzip: true, productionGzipExtensions: ['js', 'css'],
在运行npm run build命令后，出现如下错误
D:\project\card-web\code>npm run build
> card-web@1.0.0 build D:\project\card-web\code
> node build/build.js
- building for production...D:\project\card-web\code\node_modules\compression-webpack-plugin\dist\index.js:175
compiler.hooks.emit.tapAsync({ name: 'CompressionPlugin' }, emit);
在网上查的解决办法是安装1.1.12版本的 compression-webpack-plugin 插件
打包后的文件如下
static/js/1.bdad110050937896a84e.js.gz 13.6 kB [emitted] static/js/3.828c628c40c4bc525ae7.js.gz 12.8 kB [emitted] static/js/4.79ae7c6abc396b26d0b3.js.gz 8.26 kB [emitted] static/js/2.d67fc44642bc1e9dbb20.js.gz 15 kB [emitted] static/js/7.01e19cc92a46d69e9c56.js.gz 8.63 kB [emitted] static/js/6.b83718664f10c5204a2b.js.gz 9.07 kB [emitted] static/js/9.630f4cb6da91c2dd4d17.js.gz 4.08 kB [emitted] static/js/8.3925a441b5923a83afca.js.gz 9.17 kB [emitted] static/js/10.b7bd2b50e9fe640388cb.js.gz 3.15 kB [emitted] static/js/11.b83e7d7f0ca68d3d7d2f.js.gz 7.13 kB [emitted] static/js/12.643bbb7e6a8a93221184.js.gz 5.32 kB [emitted] static/js/app.5026a87c558010ba855a.js.gz 21.6 kB [emitted] static/js/DrawingManager.js.gz 14.4 kB [emitted] static/css/app.c579ed9cc56fa8bbc397497ed7137724.css.gz 50.6 kB [emitted] static/js/5.c3b717f99991333b6725.js.gz 167 kB [emitted] static/js/vendor.f81088bb5c639380b4c5.js.gz 325 kB [emitted] [big]
附：用curl命令测试服务器时候开启Gzip
[root@yewu1 ~]# curl -I -H "Accept-Encoding: gzip, deflate" "http://test.szhqiot.top/static/js/manifest.32ac8929086abe9ca43c.js" HTTP/1.1 200 OK Server: nginx/1.14.0 Date: Tue, 30 Oct 2018 01:51:55 GMT Content-Type: application/javascript Last-Modified: Mon, 29 Oct 2018 09:58:36 GMT Connection: keep-alive Vary: Accept-Encoding ETag: W/"5bd6d9cc-6b4" Content-Encoding: gzip
响应头出现Content-Encoding: gzip这说明服务器开始Gzip成功
4.f12后发现有项目中的打印信息，甚至断点
解决：修改 webpack.prod.conf.js 文件，UglifyJsPlugin 插件新增 drop_debugger ， drop_console 字段
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true,
drop_console: true
}
},
