VUE项目增加前缀访问(包括页面及静态资源)

---

---

前言

部署项目时可能主域名被占用，根节点无法使用这时需要使用前缀进行访问；打包时需要更改路由相关配置

一、 更改router模式，添加前缀

位置：router文件夹下面的index.js

const router = new Router({
  base: '/nhtjfx/', // 路由前缀
  mode: 'history', // 采用history模式URL的路径才跟配置的对应上，不然URL是先加/#再追加配置的地
  routes:[...]
  });

---

二、实现静态文件加前缀

• 位置：vue.config.js

代码如下（示例）：
module.exports = {
publicPath: ‘/nhtjfx/’,
}

---

三、更改打包环境变量

• 位置：.env.production

# Merryworks管理后台/生产环境
VUE_APP_BASE_API = '/nhtjfx/prod-api'

---

四、更改config.js

...
module.exports = {
  // 部署生产环境和开发环境下的URL。
  // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
  publicPath: process.env.NODE_ENV === 'production' ? '/nhtjfx/' : '/',
  ...
  }

五、nignx配置

server {
       listen       8088;
       server_name  localhost;

       location ^~ /nhtjfx/prod-api/ {
               proxy_pass http://127.0.0.1:9090/;
               proxy_set_header           Host $host;
               proxy_set_header           X-Real-IP $remote_addr;
               proxy_set_header           X-Forwarded-For $proxy_add_x_forwarded_for;
               proxy_set_header           X-Forwarded-Proto $scheme;
       } 
	
	   location /nhtjfx/ {
		    alias /usr/local/linewell/web/nhjcfx/front/nhtjfx/;
		    index index.html;
		    try_files $uri $uri/ /nhtjfx/index.html;
	   } 
    }

---

总结

更改vue代码，配置nginx代理