当前位置：首页 > news >正文

vue3如何配置不同的地址访问不同的项目

news 2025/9/18 8:44:05

适用场景

需要一个域名根据路径的不同访问不同的项目，比如 https://aaa.com/home 访问前台首页 https://aaa.com/admin 访问的是管理后台。

一，在前端项目的vue-router路由里配置指向不同的地址

项目是要部署在/home地址下，我们需要在路由器中设置基础路径是/home。

const router = createRouter({history: createWebHistory('/home'),//不管是什么路由模式，都能传入一个字符串，来设置基础路由，不传的话默认就是/routes: [{path: '/',name: 'home',component: HomeView,},],
})

在配置文件里，要设置他的打包后的路径，这里要和他们的配置文件同步，这里是为了防止当代码打包后，文件地址错误。我们找到vite.config.ts或者vue.confie.ts文件，在文件里加入base配置。

// https://vite.dev/config/
export default defineConfig({plugins: [vue(),// vueDevTools(),],base: '/home', //这里要和我们新增的文件地址一致，防止打包的代码文件部署在服务器上后无法访问resolve: {// alias: {//   '@': fileURLToPath(new URL('./src', import.meta.url))// },},

这时候vue上的配置就已经设置好了然后就可以打包，打包后我们就需要进入到nginx上进行配置

二，在nginx上，接收前端路由传入的不同地址，并转发到不同的项目上。

server{listen 98;server_name 127.0.0.1;root / project / test /; //这里是默认访问，假设浏览器访问时，没有加上home，直接输入的域名，这时候我们就需要给他一个默认项目，去匹配，可以是相同的项目，比如我们这个项目在vue-router的配置里设置的基础路由是/home 所以他还是会进入到home路由location / { //这是为了防止在history模式下输入错的地址导致404问题，这里让他指向vue前段代码处理，而不是nginx自己处理try_files $uri $uri/ /index.html;
}
location / home {  //这里home就是我们要nginx转发的homealias / project / test /;try_files $uri $uri / /index.html;index  index.html index.htm;
}
location / admin {  //这里admin就是我们要nginx转发的adminalias / project / admin /;try_files $uri $uri / /index.html;index  index.html index.htm;
}}

这时候我们的一个域名多个地址匹配多个项目就配置好了。