vue路径上如何设置指定的前缀 || 在同一ip和端口部署多个vue项目-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue路径上如何设置指定的前缀 || 在同一ip和端口部署多个vue项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在实际开发项目里，我们可能有多个系统需要部署。一般我们都是通过nginx代理路径。但是如何在ip和端口不变的情况下同时访问多个系统呢？这时候我们就需要使用不通的前缀名去指向多个系统的页面地址。

nginx配置

server{
	listen      8888;
	server_name  localhost;
	root html
    location /xm1 {
           root   E:\project\demo\xm1\dist;
		   try_files $uri $uri/ /index.html;  #定向访问路径
		   index  index.html index.htm;
    }
    location /xm2 {
           root   E:\project\demo\xm2\dist;
		   try_files $uri $uri/ /index.html;  #定向访问路径
		   index  index.html index.htm;
    }
}

光配置nginx肯定是不行的，因为你在访问项目路由的时候，你的让路由知道跳转的是nginx配置的哪个路径。所以需要在所有路由前面加一个前缀。其次项目外部引入的静态资源文件路径也需要加这个前缀

vue路径上如何设置指定的前缀

在项目里打开router/index.js，在里面配置一个base属性路径

const router = createRouter({
  history: createWebHistory(),
  base: "/xm1", //一般这个配置没有，需要手动加
  routes: constantRoutes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  },
});

这个配置只是改了路由的前缀，并不会更改静态资源的前缀。需要在vite.config.js里面的base添加同样的前缀（也有的叫publicPath）

vue访问路径加固定前缀,vue.js,前端,javascript