vue-router路由history模式，hash模式，Nginx部署到非根目录

一、history模式

1、vue.config.js 配置

module.exports = defineConfig({
  publicPath:process.env.NODE_ENV === 'production' ? '/vue/' : '/',      //此处配置路由，路由名为vue，必须加 /    ,可以随意更改
  outputDir: 'project',     //此处为vue打包后的文件名称
  devServer: {.......此处省略......},
  transpileDependencies: true,
  lintOnSave: false,
});

2、router 文件下 index.js

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [......此处省略......],
});

3、nginx.conf配置

/**
 * 此处的/vue 路由对应的是publicPath设置的地址，而不是nginx下存放的project项目包，因为history模式不需要实际存在设置的路由路径，也就是此处的vue
 */
location /vue {
    alias   D:/nginx-test/nginx-1.24.0/project/; #此处指向的nginx的项目包
    try_files $uri $uri/ /vue/index.html;
    index  index.html;
}

网址访问：http://ip:prot/vue 即可看到自己的首页

二、hash模式

1、vue.config.js 配置

module.exports = defineConfig({
  publicPath:process.env.NODE_ENV === 'production' ? './' : '/',      //此处配置路由，路由名为./  ,相对路径
  outputDir: 'project',     //此处为vue打包后的文件名称
  devServer: {.......此处省略......},
  transpileDependencies: true,
  lintOnSave: false,
});

2、router 文件下 index.js

export default new Router({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes: [......此处省略......],
});

3、nginx.conf配置

/**
 * 此处的/project 路由对应的是nginx下存放的project项目包
 */
location /project {
    root   D:/nginx-test/nginx-1.24.0; #此处实际映射为 D:/nginx-test/nginx-1.24.0/project  root地址拼接location映射
    index  index.html;
}

网址访问：http://ip:prot/project 即可看到自己的首页