vue项目联调上线笔记

1、部分浏览器不支持promise而导致页面白屏解决

①安装babel-polyfill

npm install --save-dev babel-polyfill

②引用babel-polyfill

//main.js中
import 'babel-polyfill'

2、打包上线到后端服务器目录并非服务器更目录的办法解决

需要在config文件中找到

build: {
    assetsPublicPath: '/' 
}
//此处可以配置要后端服务器的真实目录
//例如打包好文件放在服务器根目录下的project文件件下则需要将‘/’换成‘/project’

然后执行npm run build把生成的dist文件夹下的文件放到后端服务器根目录下的project文件夹即可

3、开启soure-map方便对代码的调试

在config的index.js的文件中设置

//开发环境
dev: {
    devtool: 'cheap-module-eval-source-map'
},
//生产环境
build: {
    devtool: '#source-map',
}

其中参数详细说明说明
传送门

4、异步组件的使用（性能优化）

问题：
查看请求得知加载首页时即已完整请求各个组件所需js，当js文件大于1Mb时会导致文件过大请求过慢，此时需要考虑到每个页面或者组件只请求自己所需的js，该组件未加载则不请求

解决办法：
采用异步组件的方式即可解决问题，具体使用方法如下代码

<script>
export default {
    //其中import参数为组件路径
    components: {
        navBar: () => import('./pages/nav/navBar')
    }
}
</script>

通过使用()=>import(‘组件路径’)的方式可以对组件进行异步处理，此方法适用所有用到组件的地方

**注意：**当app.js小于1Mb时切勿使用异步组件，因为使用异步组件会多请求js文件，请求数增加同样会影响性能