webpack打包vue-router时hash和history问题

当用webpack打包vue+vue-router项目时，vue-router有createWebHistory和createWebHashHistory两种常用路由历史模式，本篇是关于其打包问题的描述及解决办法。

createWebHistory

当使用createWebHistory模式时，地址栏里是没有井号(#)的，每次请求网址都会向服务器重新发送请求，不支持老版本IE浏览器，当用webpack打包时，需传递默认路由给它，具体代码如下：

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

然后记得配置vue.config.js或webpack.config.js，内容如下：

# vue.config.js

module.exports = {
  // 执行 npm run build 统一配置文件路径（本地访问dist/index.html需'./'）
  // NODE_ENV：Node.js 暴露给执行脚本的系统环境变量。通常用于确定在开发环境还是生产环境
  //在这里面./或留空都可以，网上说用./这种相对路径存在弊端。
  publicPath: process.env.NODE_ENV === 'production' ? '' : '/',
  outputDir: 'dist', // 输出文件目录
  productionSourceMap: false, //如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
}

配置好后上传服务器还需配置NGINX，代码如下：

location / {
    root   /opt/app/fontend;
    index index.html index.htm;
    try_files  $uri $uri/ /index.html;
}

createWebHashHistory

当使用createWebHashHistory模式时地址栏是有井号的，也被称为锚点，本身是用来做页面定位的。

由于hash值变化不会导致游览器向服务器发出请求，而且hash改变会触发hashchange事件，hashChange事件中获取当前的hash值，并根据hash值来修改页面内容，则达到了前端路由的目的。

还有一个很关键的地方，hash由于带#的原因，导致seo爬虫并不会解析#后面的内容，对多页面seo极其不友好，但是对单页面网站无伤大雅。

hash使用时很省心，不用配置NGINX也无需配置vue.config.js，也不用向其传参。