webpack-vue-项目打包上线

打包上线

1. 去除console.log命令 ：
   • 安装 babel-plugin-transform-remove-console   
   • 在.babelrc文件里面添加  "plugins": ["transform-remove-console"]    或者 在 babel.config.js 里面添加  "plugins": ["transform-remove-console"]
   • 建议直接百度   成品 不带变得
   • babel-plugin-transform-remove-console npm文档
2. 生成打包报告
   • 命令行：vue-cli-service build --report  或者  npm run build --report
   • vue-ui：bulid -- 分析
3. 修改打包入口：如果要修改webpack 的相关命令，那么我们需要新建一个文件 vue.config.js  。（然后首先导出配置对象，在导出的配置对象里面写东西哦），然后在configureWebpack 或者 chainWebpack 来修改webpack配置.他们俩作用一样，只是一个是对象，一个是链式

4. moudle.export = {
       chainWebpack: (config) => {
           //判断当前打包状态 上线
           config.when(progress.env.NODE_ENV==="production", config => { 
               //.env文件是什么？是环境变量，是配置文件
               config.entry('app').clear().add('./src/main_prod.js')
           })
           //生产环境
           config.when(progress.env.node_env==="developmet", config => {
           config.entry("app").clear().add("./src/main-dev.js")
           })
       }
   }

加载外部CDN ：让项目体积更小。因为我们在写项目的时候加载了很多下载到本地的第三方包。写在external里面的，在webpack打包的时候，不会合并到输出文件中。而是会在window全局查找并直接使用这个对象。 

//在 vue.config.js配置
config.set('externals', {
        vue: 'Vue',
        axios: 'axios',
        'vue-router': 'VueRouter',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })

//在HTML里面配置
link相应CSS
script相应JS

1. 通过CDN配置   element-ui :

首先 注释掉element-ui在main-prod.js中的引用，然后 在html里面添加CSS、JS   然后就好了

1. 自定义首页内容

在vue.config.js 中  ， 通过插件的方式进行定制。

//  plugin（“html”）找到html插件，

// .tap( ) 修改插件里面的固定配置项 

// args 配置项里面的一些相关参数

// args[0].prod  给配置项追加自定义属性

config.plugin( " html" ) .tap ( ( args )=>{

args[0].prod=false

return args

} )

//然后判断 args[0].prod的值的不同，来给主页渲染不同样式

路由懒加载 

实现 当路由被访问时 才加载对应模块