Vue路由从hash转history模式的实现步骤及后端（koa）的适配方法

一、路由模式更改

更改模式本身倒没什么麻烦事。

router.js:

import Vue from 'vue'
import Router from 'vue-router'

// 其他引入...

Vue.use(Router)

export default new Router({
   
   
	// 将 mode的值改为'history'
	mode: 'history',
	linkActiveClass: 'active',
	// 路由匹配规则...
	routes: []
})

二、指定静态资源目录

vue-cli3把原先的许多配置文件简化为了一个vue.config.js文件（需要自行创建），也正因此，对新版本的打包应该选用新的配置方法，配置中对静态资源目录的指定也决定着history模式是否能够转换成功。

vue.config.js:（简配）

module.exports = {
   
   

    configureWebpack: {
   
   
        resolve: {
   
   
            // 为路径设置别名
            alias :{
   
   
                // '@' 表示src（已由内部配置好了）
            }
        }
    },

	
    /* 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath */ 
    // 注：hash模式下使用 "./" ,history模式下使用 "/"
    publicPath: process.env.NODE_ENV ===