Vue history模式添加前缀 Nginx配置

可能因为太菜了，这个地方卡了挺久的，现在记录一下

环境

Vue-Cli 4.15.13、vue-router 3、nginx 1.20.2

具体步骤

1、Vue 中配置

（1）更改router模式，添加前缀

export default new Router({
	  mode: 'history', // history模式，不带#，由服务器负责转发
	  // mode: 'hash',
	  base: '/kyxm', // 前缀名
	  routes: [...]
  })

（2）更改vue配置和打包路径
config/index.js，拿来就用系列

module.exports = {
  publicPath: '/kyxm',  // 前缀名
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // 配置代理，但是打包后代理会失效
    proxyTable: {
      '/api': {
        target: XXX,
        ws: true,
        changOrigin: true,
        pathRewrite: {
          '^/api': ''
        },
      },
      '/dev-api': {
        target: YYY,
        ws: true,
        changOrigin: true,
        pathRewrite: {
          '^/dev-api': ''
        },
        secure: true,
        // logLevel: 'debug',
      }
    },

    // Various Dev Server settings
    host: '0.0.0.0', // can be overwritten by process.env.HOST
    port: 41892, // 配置端口
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, 
    
    /**
     * Source Maps
     */
    devtool: 'cheap-module-eval-source-map',

    cacheBusting: true,

    cssSourceMap: true
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist/'),
    assetsSubDirectory: 'kyxm',  // 这里的打包路径改成前缀名
    assetsPublicPath: './',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    devtool: '#source-map',

    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    
    bundleAnalyzerReport: process.env.npm_config_report
  },
}

2、Nginx配置

server {
        listen       41892;
        server_name  localhost;
        
		# 静态文件位置
		location /  {
			root   html/kyxm;
			rewrite / /kyxm ; # 重写路由
		}
		location @router { 
			rewrite ^.*$ /index.html last; 
		}
		location /kyxm {
			try_files $uri $uri/ @router;
			index  index.html index.htm;
		}
		
		# 配置代理
		location /kyxm/api/ {
			proxy_pass  XXX;
		}
		
		location  /kyxm/dev-api/ {
			proxy_pass  YYY;
		}
		location  /login {
			rewrite /login  XXYY;
		}
    }

后续

依然存在的问题

刷新会返回首页，没有解决，难受，有没有大佬教一下

没想到我这帖子还能被搬，听我说谢谢你