vue项目 history模式 配置nginx 二级目录

1.router.js添加base

const router = new Router({
    mode: 'history', // history、hash 路由模式
    base: '/blockchain/',
    routes
});

2.项目根目录下的vue.config.js文件（没有此文件则新建）

// 打包输出的公共路径 publicPath 的值需要和 router.js 中base的值一致
module.exports = {
    outputDir: 'dist', // 打包输出文件夹
    publicPath: process.env.NODE_ENV === 'production' ? '/blockchain/' : '/',
}

3.服务器 nginx.conf 文件配置

// server 的配置
server {
            listen       80;
            server_name  test.com;
            #charset  oi8-r;
            #access_log  logs/host.access.log  main;
            
            # 根目录访问, http://test.com/
            location / {
              root   /root/provenance/front/react;
              try_files $uri $uri/ /index.html;
              index  index.html index.htm;
            }

            
            # 二级目录访问, http://test.com/blockchain
            location /blockchain {
             alias   /root/provenance_blockchain/;
             try_files $uri $uri/ /blockchain/index.html;
             index  index.html index.htm;
			}

}