nginx配置同一域名同一端口下部署多个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,这里用的是window服务器;
server {
listen 80;
server_name www.coderkey.com;
#charset koi8-r;
#access_log logs/host.access.log main;
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
到此这篇关于nginx配置同一域名同一端口下部署多个vue项目的实现的文章就介绍到这了,更多相关nginx配置多个vue项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
nginx报错:[emerg] getpwnam(“www“)failed问题及解决
这篇文章主要介绍了nginx报错:[emerg] getpwnam(“www“)failed问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03
Nginx防盗链根据UA屏蔽恶意User Agent请求(防蜘蛛)
相对于 Apache,Nginx 占用的系统资源更少,更适合 VPS 使用。恶意盗链的 User Agent 无处不在,博客更换到 WordPress 没几天,就被 SPAM(垃圾留言)盯上,又被暴力破解后台用户名密码。今天来介绍 Nginx 屏蔽恶意 User Agent请求的方法2016-07-07


最新评论