搜索到
1
篇与
Vue
的结果
-
Vue项目中设置路由为二级目录访问 在日常的开发工作中，我们经常遇需要把多个项目和服务部署在同一个域名下，然后使用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配置项，具体的参数说明如下：更多说明查看官网说明： 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 访问即可访问到我们的服务.
