Vue 携带项目名部署在Nginx中

1、场景

Nginx项目部署vue 项目时需要携带项目名称。

例如 http://www.abc.com/project_name/

此时需要在vue项目中和nginx.conf文件中进行修改

以下我自己尝试了，可能有其他的方式。

2、Vue项目调整的地方

router文件夹下 index.js

const createRouter = () => new Router({
  // mode: 'history', // require service support
  mode: 'history',// 新增
  base: '/project_name/',//新增
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouter
})

修改vue.config.js

publicPath: '/project_name/' 

3、Nginx项目修改的地方

1.编译后的vue dist 复制到nginx文件夹中，按照个人喜好
​
我的方式如下：
/nginx/html/project_name/dist中的文件

nginx.conf 文件中的server中修改

location /project_name/ {
    root   html;
    index  index.html index.htm;
    try_files $uri $uri/ @router;
}
        
location @router {
    rewrite ^.*$ /project_name/index.html last;
}
​