打包优化 （pc端）-------- （添加进度条、将main.js拆分，生成打包报告、解决跨域问题、去除console、CDN引入外部资源、路由懒加载）

1.在根目录下(即：项目下)创建vue.config.js

 2.在vue.config.js中进行需要的配置

 首先生成打包报告便于分析我们的项目

     就是在package.json中的scripts下将build修改成 

"build":"vue-cli-service build --report"

    在执行npm run build  会生成一个dist目录，目录下就会多一个report页面(即就是我们的报告)

 1.1.基础配置  publicPath: './', (为了加载我们的资源)

​
module.exports={ //配置
    publicPath: './', //1、 静态资源路径（默认/，打包后会白屏）

}

​

如果还出现白屏，需要关闭 lintOnSave

    lintOnSave: false,

1.2.如果有跨域需要配置proxy

   devServer: {
        open: false, // 自动启动浏览器
        host: '0.0.0.0', // localhost
        port: 6060, // 端口号
        hotOnly: false, // 热更新
        overlay: {
           //  当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
           warnings: false,
           errors: true
         },
         proxy: {
           // 2 配置跨域
           '/api': {
             target: 'http://120.53.31.103:84/api', // 接口的域名
             // ws: true, // 是否启用websockets
             changOrigin: true, // 开启代理，在本地创建一个虚拟服务端
             pathRewrite: {
               '^/api': '/'
             }
           }
         }
      
     },

1.3.去除生产环境SouceMap (这个js文件是占很大空间)

 productionSourceMap: false,  //2.去除生产环境的productionSourceMap

1.4.将main.js进行拆分

 把main.js拆分成 main-prod.js 和 ma