Vue项目中设置路由为二级目录访问

哈根达斯
2022-11-16 / 0 评论 / 530 阅读 / 正在检测是否收录...

在日常的开发工作中,我们经常遇需要把多个项目和服务部署在同一个域名下,然后使用nginx进行代理转发,例如:

  • 接口服务:a.com/api, 接口服务对应Java或PHP后台应用
  • 首页服务前端工程:a.com , 前端服务使用Vue编写
  • 后台服务前端工程:a.com/system,管理后台服务使用Vue编写,使用二级目录system

因项目都需要部署在同一个域名,我们vue需要坐如何设置才能满足要求?

了解vue-cli

在vue的项目中,我们的项目编译和构建依赖于构建编译工具,所以我们需要对当前项目的cli版本或vite版本有所了解并到官网查看对应的API和配置说明:

vue-cli 方式

第一步,我们需要在vue.config.js文件中新增publicPath配置项,具体的参数说明如下:
laix6ory.png
更多说明查看官网说明: vue-cli官网介绍

建议实际项目中使用条件式参数,或者在配置文件中设置值,参考代码如下:

const vueConfig = {
    publicPath: process.env.NODE_ENV === 'production' ? '/system/' : '/',
}

第二步,修改路由配置,

const createRouter = () =>
  new Router({
    mode: process.env.NODE_ENV === 'production' ? 'history' : 'hash',// 路由访问模式,可选参数,如果试history,则nginx需要做额外的配置
    base: process.env.NODE_ENV === 'production' ? '/system/' : '/',// 访问基础路径,重要设置
    routes: routerMap // 你的路由配置
  })

const router = createRouter()

export default router

第三步修改nginx配置信息:
当我们的路由使用history模式访问时,需对配置进行修改

server {
        listen        80;
        server_name  a.com;
        root   /home/projectWork; #项目根目录

        #后台服务
        location /system {
            index  index.html;
            try_files $uri $uri/ /system/index.html; #重要,vue项目解决刷新后404问题,配置项为重试查找别的文件,具体配置请自行百度"nginx try_files"
            alias /home/projectWork/system;
        }
        # 接口服务
        location /api {
            proxy_pass http://127.0.0.1:8501;
            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_hide_header X-Powered-By;
            proxy_set_header Upgrade $http_upgrade;
             proxy_set_header Connection "Upgrade";

        }
        
}

至此我们把system项目打包编译后的文件放到网站本目录下的system目录下,使用路径a.com/system 访问即可访问到我们的服务.

0

评论 (0)

取消