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 === 'development' ? '/public/' : '/',
    /* 输出文件目录：在npm run build时，生成文件的目录名称 */
    outputDir: 'dist',
    /* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
    assetsDir: 'assets',
    /* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
    productionSourceMap: false,
    /* 文件名hash，false保持原文件名不变 */
    filenameHashing: false,
    /* 代码保存时是否进行eslint检测 */
    lintOnSave: true,
    /* webpack-dev-server 相关配置 */
    devServer: {
        /* 自动打开浏览器 */
        open: true,
        /* 设置为0.0.0.0则所有的地址均能访问 */
        host: '0.0.0.0',
        port: 3000,
        https: false,
        hotOnly: true,
        disableHostCheck: true
    },
    css: {
        requireModuleExtension: false, // 是否开启支持 foo.module.css 样式
        extract: false, // 是否使用 css 分离插件 ExtractTextPlugin，采用独立样式文件载入，不采用 <style> 方式内联至 html 文件中
        sourceMap: false, // 是否构建样式地图，false 将提高构建速度
        loaderOptions: { // css预设器配置项
            sass: {},
            css: {},
            postcss: {}
        }
    },
}

其中

publicPath: process.env.NODE_ENV === 'development' ? '/public/' : '/'

这一句通过条件表达式表明：开发状态下使用项目中的’public/‘目录作为静态资源目录，而非开发模式（production模式） 下使用‘/’（意味域名根目录）作为静态资源的根目录（当然亦要相应地在后端服务器上指定静态资源的目录），到这也能看出来了，实际上这里的publicPath就是以往版本中的assetsPublicPath。而这里的关键就是切换到history模式后，需要把production模式对应的条件值改为’/’，否则前端会出现资源加载错误。

三、koa后端适配

在此，我选用了对前端比较亲和的node作为后端开发，并采用了最新的koa框架。下面将给出一简易的的服务端目录并据此给出koa代码。

服务端文件目录:

|—server/
|——module/
|——node_modules/
|——public/
|———assets/
|———favicon.ico
|———index.html
|——app.js
|——package-lock.json
|——package.json

即把经webpack打包好的所有文件放在public目录中，并在后端将该目录指定为静态资源目录/域名根目录（如下）。

app.js:

const fs = require('fs');
const path = require('path');
const Koa = require('koa');
const Router = require('koa-router');
const bodyParser = require('koa-bodyparser');
const static = require('koa-static');
const { historyApiFallback } = require('koa2-connect-history-api-fallback');

const app = new Koa();
const router = new Router();

app
    // koa2-connect-history-api-fallback中间件一定要放在静态资源服务中间件前面加载
    .use(historyApiFallback({
        index: '/index.html'
    }))
    // 配置post中间件
    .use(bodyParser())
    // 配置静态资源服务中间件，指定域名根目录的映射
    .use(static(path.join( __dirname, '/public')))

// 配置路由
router
    .get('/', async ctx => {
        ctx.render('index');
    })
    // 其他路由匹配规则....

// 应用路由
app
    .use(router.routes())
    .use(router.allowedMethods());

app.listen(3000);

其中使后端能够适配前端路由history模式的关键在于koa2-connect-history-api-fallback中间件的引入，并且一定要之于静态资源服务中间件（koa-static）之前安装。