第一步:下载安装nginx 官网: http://nginx.org/en/
第二步:将自己的vue项目打包为dist文件夹;
第三步:解压下载的nginx文件夹,使用cmd进入到nginx文件夹下,使用指令start nginx启动nginx服务器;
第四步:浏览器输入localhost:80,查看nginx是否启动;
第五步:进入nginx/html文件夹下,删除50.html和index.html文件,将vue项目打包玩的dist文件夹下的所有文件复制到nginx/html文件夹下;
第六步:刷新浏览器,项目启动成功;
使用proxy_pass配置反向代理,在匹配到location配置的URL路径后，转发请求到proxy_pass配置额URL，是否会附加location配置路径与proxy_pass配置的路径后是否有"/"有关，有"/"则不附加
location /test/ {
proxy_pass http://127.0.0.1:8080/;
}
请求/test/1.jpg，将会被nginx转发请求到http://127.0.0.1:8080/1.jpg（未附加/test/路径）。
进阶
1.在同一域名下监听不同端口,启动不同项目;
第一步:将不同的项目打包dist,并重命名为app1, app2 ...
第二步:将项目文件夹移到nginx/html文件夹下;
第三步:打开nginx/conf/nginx.conf文件, 找到
server {
listen 8001;
# 监听的端口号;
server_name localhost;
# 服务器地址:可以使ip,对应hosts文件
location / {
# localhost:8001 浏览器访问根路径,不可修改
root html/app1;
# 指定项目所在路径html/项目名字
index index.html index.htm;
# 指定项目入口文件,一般默认index.html
}
location = /app1/index.html {
# 浏览器访问地址,指向项目文件夹下的index.html
root html/emms;
index index.html index.htm;
}
# 配置反向代理,解决跨域问题
location /api {
proxy_pass http://172.xx.xx.xx:8000;
}
}
server {
listen 8002;
# 监听的端口号;
server_name localhost;
# 服务器地址:可以使ip,对应hosts文件
location / {
# localhost:8002 浏览器访问根路径,不可修改
root html/app2;
# 指定项目所在路径html/项目名字
index index.html index.htm;
# 指定项目入口文件,一般默认index.html
}
location = /app2/index.html {
# 浏览器访问地址,指向项目文件夹下的index.html
root html/app2;
index index.html index.htm;
}
}
需要几个项目复制几个,修改为对应的项目名称
- 第四步:
nginx -s reload重载nginx配置文件,重启nginx
nginx -s stop停止nginx,
如果报错
nginx: command not found则使用./nginx -s xxx
监听同一端口,不同路径部署多个项目
- 将vue项目配置文件下的publicPath修改为: '/项目名称/'
// vue.config.js
module.exports = {
publicPath: `/app1/`, // 打包后的文件路径
outputDir: `dist/app1`, // 打包文件放置在dist文件夹下的app1文件夹
};
- 配置nginx.conf文件,路径同上
server {
listen 8001;
# 监听的端口号;
server_name localhost;
# 服务器地址:可以使ip,对应hosts文件
root html; #文件根路径
# 第一个项目app1
location ^~/app1/ {
try_files $uri $uri/ /app1/index.html;
#访问根路径下的app1/index.html入口文件
}
#第二个项目app2
location ^~/app2/ {
try_files $uri $uri/ /app2/index.html;
#访问根路径下的app2/index.html入口文件
}
location /api1{
proxy_pass http://172.xx.xx.xx:8001;
}
location /api2 {
proxy_pass http://172.xx.xx.xx:8002;
}
}
- 其他操作同上
vue配置反向代理
vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://172.xx.xx.xx:8000',
changeOrigin: true,
pathRewrite: {
'^/api': '',
},
},
},
},
};
