您当前的位置: 首页 >  学无止境 >  文章详情

nginx服务器同域名配置多个vue项目踩坑点

时间: 2024-01-09 【学无止境】 阅读量:共35人围观

简介 新开了一个项目vue2的脚手架,使用常规配置的域名访问没问题,但是通过nginx配置在同一个域名下开了一个/test的路径来访问,打包上传后发现访问不了,出现空白页面,部署到线上后,刷新页面显示404,通过调试发现几个问题点以及解决办法。

本地启动/部署到线上后,切换路由,资源路径不正确导致页面空白。
配置打包路径(2.x项目是assetsPublicPath,而3.x项目是publicPath)。

项目配置

vue2 vue.config.js指定目录

module.exports = defineConfig({ publicPath: "test",//指定项目目录 ... })

router/index.js

const router = new Router({ base: "test", //指定项目目录 mode: "history", // 去掉#,需要路由模式改为history routes: routes, });

vue3 vite.config.ts

export default defineConfig(({ command, mode }): UserConfig => { const isBuild = command == 'build' const root = process.cwd() const env = parseEnv(loadEnv(mode, root)) return { base: "/test/", // 关键代码,指定项目目录 // plugins: [vue(),], plugins: setupPlugins(isBuild, env), } })

router/index.ts

const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [...], })

nginx服务端配置

  • 当使用HTML5 History模式时,前端路由的URL(例如,/project/test)在刷新页面时可能会被解析为服务器上的路径,而不是在前端路由中。这可能导致Nginx服务器返回404,因为实际上没有对应的文件路径。
  • 当使用HTML5 History模式时,前端路由的URL(例如,/project/test)在刷新页面时可能会被解析为服务器上的路径,而不是在前端路由中。这可能导致Nginx服务器返回404,因为实际上没有对应的文件路径。
  • 为了解决这个问题,你需要在Nginx配置中使用try_files来重定向请求到入口HTML文件

try_files这行是关键,$uri为变量,代表你访问的地址。意思大概是,如果访问test/文件夹下面的某个文件,找不到时就返回/test/下面的index.html文件。

location /test { alias /www/test/dist; index index.html; try_files $uri $uri/ /test/index.html; #指定 gzip on; #启用压缩 gzip_min_length 1k; gzip_comp_level 9; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; gzip_vary on; gzip_disable "MSIE [1-6]\."; }

以上配置完成即可正常访问,刷新页面也可访问

文章评论
总共 0 条评论
这篇文章还没有收到评论,赶紧来抢沙发吧~
Copyright (C) 2023- 小祥驿站 保留所有权利 蜀ICP备 17034318号-2  公安备案号 50010302004554