前端项目访问路径加统一前缀

奇了怪ya
599 阅读2分钟

前端项目访问路径加统一前缀

背景：根据“统一入口、集中代理”的数字化转型要求，多个项目要发布至同一个域名下，通过域名后增加统一前缀来区分及路由至指定的服务，例如统一域名下：

门户网站：ceshi.zjjjrrr.com:9103

系统a: ceshi.zjjjrrr.com:9103/aaa

系统b: ceshi.zjjjrrr.com:9103/bbb

以若依前端为例,访问路径加统一前缀步骤：

  1. vue.config.js文件修改publicPath属性
module.exports = {
  // 部署生产环境和开发环境下的URL。
  // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
  // 例如 https://www.tele.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.tele.vip/admin/，则设置 baseUrl 为 /admin/。
  publicPath: process.env.NODE_ENV === "production" ? "/citylineinput/" : "/",
    // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
  outputDir: 'citylineinput',
  // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
  assetsDir: 'static',
    ……
}

image.png

官方参考文档：
cli.vuejs.org/zh/config/#…

ps:改完第一步还需要设置路由前缀，不然一刷新前缀就没有了。踩过的坑！！！

  1. 页面路由加前缀

router下的index.js new Router(); 新增 base属性


export default new Router({
  mode: 'history', // 去掉url中的#
  base: process.env.NODE_ENV === "production" ? "/citylineinput/" : "/",
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

image.png

3.增加请求后端前缀 设置VUE_APP_BASE_API属性值

VUE_APP_BASE_API = '/citylineinput/prod-api'

image.png

ps:改完第三步还需要设置nginx配置，不然一刷新就是404或者nginx的欢迎页。也是踩过的坑！！！ 4.nginx代理try_files属性修改

    location /citylineinput {
	    root /data/testLzz;
		try_files $uri $uri/ /citylineinput/index.html;
    }

image.png

try_files说明：  
1.按指定的file顺序查找存在的文件，并使用第一个找到的文件进行请求处理 
2.查找路径是按照给定的root或alias为根路径来查找的
3.如果给出的file都没有匹配到，则重新请求最后一个参数给定的uri，就是新的location匹配
4.结尾的斜杠表示文件夹，如$uri/
5.如果所有的文件都找不到，则内部重定向至最后一个参数
avatar
文章
阅读
粉丝