正式完整版配置

一、去掉console

在—配置服务—知识库里面

二、配置开发和发布模式的入口文件

2-1 一般插件用CDN优化

//main-prod.js
删除插件里面的***.css(本地的css除外)

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })
    })
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}

//public/index.html
<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

2-2 Element UI CDN

删除main.prod.js里面的import './plugins/element.js' //按需导入
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css" />
<script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>

2-3 路由懒加载

yarn add @babel/plugin-syntax-dynamic-import --dev
// babel.config.js
var prodPlugins = []
if (process.env.NODE_ENV==='production') {
  prodPlugins.push('transform-remove-console')
}
module.exports = {
  'presets': [
    '@vue/cli-plugin-babel/preset'
  ],
  'plugins': [
    ...prodPlugins,
    '@babel/plugin-syntax-dynamic-import'
  ]
}

// router.js 路由注释的部分是打包是加载到不同的JS文件
const Report = () => import(/* webpackChunkName: "Order_Report" */ '../components/report/Report.vue')

三、vant UI CDN的引入bug

jsDelivr官网的引入
<script src="https://cdn.jsdelivr.net/npm/vant@2.8.4/lib/index.min.js"></script>

注意！！
需要修改为
<script src="https://cdn.jsdelivr.net/npm/vant@2.8.4/lib/vant.min.js"></script>