本篇文章給大家帶來了關于nginx+vue的相關知識，其中主要跟大家聊一聊nginx配置同域名下怎么部署多個vue項目，感興趣的朋友下面一起來看一下吧，希望對大家有幫助。
前言
由于前端有很多不同項目的落地頁，但不希望每個項目的落地頁都是一個單獨的域名，所以就起了個通用的域名，然后根據請求路徑來區分不同項目。
其實這種也可以一個 Vue 項目，在前端代碼中根據不同的路由請求不同項目落地頁，也就是在一個 Vue 項目中寫所有項目的落地頁。
立即學習“前端免費學習筆記（深入）”；
但這里我是說通過 Nginx 部署多個 Vue 項目的實現方法。
解決方法
根據根路徑不同分別代理訪問不同項目，剛好解決這個問題。
第一步
在vue.config.JS文件中修改publicPath路徑為/project/
const?path?=?require("path"); //?import?path?from?'path' const?resolve?=?(dir)?=>?path.join(__dirname,?dir); module.exports?=?{ ??publicPath:?"/project/", ??//?選項... ??devServer:?{ ????open:?true,?//?設置自動打開 ????port:?8080,?//?設置端口號 ????//?host:?'192.168.0.124',?//?ip?本地 ????//?hotOnly:?true,?//?熱更新 ????disableHostCheck:?true,?//?解決?Invalid?Host?header的原因 ????proxy:?{ ??????//設置代理 ??????"/connect":?{ ????????target:?"https://open.weixin.qq.com", ????????changeOrigin:?true, ????????//?ws:?true,?//如果要代理?websockets，配置這個參數 ????????secure:?false,?//如果是http接口，需要配置該參數 ????????pathRewrite:?{ ??????????"^/":?"", ????????}, ??????} ????}, ??}, ??configureWebpack:?{ ????resolve:?{ ??????alias:?{ ????????//這里配置了components文件的路徑別名 ????????"@":?resolve("src"), ????????//?components:?resolve("src/components"), ??????}, ????}, ??}, };
第二步
在router文件夾中index.js文件中修改base為 ‘/project/’
const router = new VueRouter({ mode: "history", // mode: "hash", // base: process.env.BASE_URL, base: "/project/", routes,});
第三步
打包生成dist文件夾，然后放在對應的位置上 ，配置Nginx
server { listen 80; server_name www.coderkey.com; location / { root F:/parant/dist; try_files $uri $uri/ /index.html; } location /project { alias F:/subparant/dist; try_files $uri $uri/ /project/index.html; index index.html; }}
以上搞完就可以全部訪問了
// 例如:http://www.coderkey.com http://www.coderkey.com/project
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
