一、启用History模式

mode: 'history',

二、部署带前缀

在Nginx部署希望带上/pavilion前缀，则在route.js加上/pavilion即可。

同时在vue.config.js配置静态资源路径以及跳转页面。

module.exports = {
    // 静态资源路径配置
    publicPath: '/pavilion/',
    devServer: {
        // history模式下的url会请求到服务器端，但是服务器端并没有这一个资源文件，就会返回404，配置此项可解决
        historyApiFallback: {
            index: '/index.html'
        },
    },
}

三、Nginx配置

Nginx的静态资源根路径为/usr/share/nginx/html，location加上前缀，try_files加上项目的目录名，此时的项目路径为/usr/share/nginx/html/pavilion/。

location /pavilion {
        try_files $uri $uri/ /pavilion/index.html;
        root   /usr/share/nginx/html/;
        index  index.html index.htm;
    }

四、部署不带前缀

vue.config.js的配置。

module.exports = {
    // 静态资源路径配置
    publicPath: '/',
    devServer: {
        // history模式下的url会请求到服务器端，但是服务器端并没有这一个资源文件，就会返回404，配置此项可解决
        historyApiFallback: {
            index: '/index.html'
        },
    },
}

Nginx的配置。

location / {
        try_files $uri $uri/ /index.html;
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }