• hash模式带#，#后面的地址变化不会引起页面的刷新

• history没有#，地址变化会引起页面刷新，更符合页面地址的规范（开发环境不刷新-webpack配置）

• 将路由模式修改成history模式

打包分析

项目做完以后考虑优化，缩小体积，做分析(需要移除哪些占用体积的包)

下包

npm run preview -- --report //做分析，分析项目各个文件的大小（如下图是我用elementui和v2做的一个小项目）

如果你用到了Mock，记得移除它（比较大，上线不需要）

Mock.js是一个用于测试目的生成模拟数据的JavaScript库。它允许开发人员模拟API响应或生成虚拟数据。简单来说，它可以帮助开发人员创建假数据，以便在测试应用程序时使用。

webpack配置排除打包-引用网络资源（使用项目使用的工具（如element-ui）版本对应的线上链接）

查找链接

vue.config.js做以下操作

let externals = {}
let cdn = { css: [], js: [] }
const isProduction = process.env.NODE_ENV === 'production' // 判断是否是生产环境
if (isProduction) {
  externals = {
      /**
      * externals 对象属性解析：
      * '包名' : '在项目中引入的名字'
    */
      'vue': 'Vue', //我这里使用的是vue，根据自身情况修改
      'element-ui': 'ELEMENT', //根据自身情况修改
      'xlsx': 'XLSX'，//我这里使用了电子表格文件，没有使用请移除
  }
  cdn = {
    css: [
      'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 样式表
    ],
    js: [
      // vue must at first!
      'https://unpkg.com/vue@2.6.12/dist/vue.js', // vuejs
      'https://unpkg.com/element-ui/lib/index.js', // element-ui js
      'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js', // xlsx
    ]
  }
}

configureWebpack: {
externals: externals,//在configureWebpack使用定义的包名
}

chainWebpack(config) {
  // 注入cdn变量 (打包时会执行)
    config.plugin('html').tap(args => {
    args[0].cdn = cdn // 配置cdn给插件
    return args
 })
}

找到 public/index.html   通过配置CDN Config 依次注入 css 和 js。

  <!-- 引入样式 -->
       <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
        <link rel="stylesheet" href="<%=css%>">
       <% } %>
         <!-- 引入JS -->
    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%=js%>"></script>
    <% } %>

打包检查效果

     npm run build:prod