vue build生成dist部署到服务器上之后的一些大坑。。。

首先，，有个小项目，用vue写的，本地一切正常。
npm run build之后，生成dist包，放到nginx上部署。
一开始页面直接空白不显示，
查了以后发现是各类js,css文件没找到。
提示的是File_Not_Found.
一顿百度，
有的说什么要在根目录创建一个vue.config.js文件，里面写上

module.exports ={
    //关闭eslint
    lintOnSave:false,

    //解决build打包的时候 dist文件里面css、js、img路径错误错误的问题
    publicPath:'./',
    outputDir:"dist",
    assetsDir:'public'
}

实测，并不好用。。
继续百度，，，
改成这样

module.exports = {
    publicPath: './'
}

依然不好用。。
继续，，找到下面这货↓
“1.在build文件里面找到webpack.prod.config.js
在output里面添加publicPath:‘./’;”
不好用。。
继续，，
找到这个

解决办法:
打开config/index.js文件，将build->assetsPublicPath改为“./”，即可，就是前面加个点。

这次有效果了，最少app.js文件可以找到了。
然后是报错img/banner.jpg文件找不到。
继续百度，
发现是代码中路径是这么引用的

        src2: '../static/img/banner2.jpg',

这样在本地没问题，上传到服务器上会找不到路径。解决方法是改成用require↓

src: require('../static/img/banner.jpg'),

这次图片也没问题了，又开始报新的错误。
由于代码中有用到element-ui的icon,比如el-icon-ticket等，又提示woff等字体文件找不到
继续百，，
解决方法是↓

1、打开 build / webpack.prod.conf.js ，找到

module: {
　　rules: utils.styleLoaders({
　　　　sourceMap: config.build.productionSourceMap,
　　　　extract: true,
　　　　usePostCSS: true
　　})
},
2、把 extract : true, 改成 extract: false，就能正常显示了。

↑，很好用，直接见效，立竿见影。

以上！