- 01.安装
- 1. 安装nginx（不同版本会导致某些指令运行不成功）
- 2.解压到目录（例如：D:nginx）下然后在文件目录路径输入框输入cmd
- 3.然后输入start nginx并进行回车
- 4.在浏览器输入http://localhost:8080/出现如下图所示的内容代表着运行成功
- 02.配置
- 1.界面配置
- 2.项目配置
- 3.创建多个nginx环境代理
- 03.vue项目配置
- 1.首先配置测试环境的配置项
- 1.1配置router
- 2.配置vue.config.js
- 3.配置测试环境的接口地址
- 4.执行打包命令（测试环境）
- 5.将dist目录中的文件复制到html-test文件中，如下图所示
- 04.配置nginx-conf中的nginx.conf配置文件（主要配置server项）
- 1.配置location
- 2.在当前目录运行cmd
- 05.运行测试环境vue项目
- 06.其他环境
- 07.成功运行的vue代理项目刷新后报 Uncaught SyntaxError: Unexpected token '<' app.30bad5 并出现空白页
- 08.nginx启动后运行的界面报 500 Internal Server Error
2.解压到目录（例如：D:nginx）下然后在文件目录路径输入框输入cmd链接: https://pan.baidu.com/s/1yNpxhz5HZMZCd7C4RmpNBg 提取码: 5rze
如下图所示，通过http://localhost:8080/访问到的界面出现的内容就是通过下图的html文件夹中的index.html进行配置，那么vue的html文件也是放到html目录下进行配置
配置界面的文件都是放在html项目里，那么这时候创建一个目录，目录下面用于存放vue项目，html文件下可以创建多个文件夹也代表着可以配置多个代理
3.创建多个nginx环境代理在html目录下面创建test、dev、prod代表着测试环境、开发环境、生产环境的代理项目
给router下的index.js文件中的VueRouter配置base参数，值为test代表着测试环境，如下图所示
给vue.config.js文件中的publicPath配置测试环境（注意：这里对base配置多一个/），如下图所示
3.配置测试环境的接口地址 4.执行打包命令（测试环境） 5.将dist目录中的文件复制到html-test文件中，如下图所示 04.配置nginx-conf中的nginx.conf配置文件（主要配置server项） 1.配置locationlocation ^~/dev {
index index.html;
try_files $uri $uri/ /test/index.html;
}
location ^~/test {
index index.html;
try_files $uri $uri/ /test/index.html;
}
location ^~/prod {
index index.html;
try_files $uri $uri/ /prod/index.html;
}
2.在当前目录运行cmd
暂停现有nginx，再进行重启
nginx -s stop
start nginx
如遇到无法暂停的nginx那就代表这你已运行多个nginx，需要手动在：任务管理器-详细信息中找出nginx并结束任务
05.运行测试环境vue项目在浏览器输入http://localhost:8080/test并进行回车就可以访问到代理测试环境的vue项目，这时候就可以看到vue项目的界面，如下图所示
只需要重复03-3步骤即可
通过打包前配置不同环境，打包后将不同环境的包分别放到对应的环境文件即可（test、dev、prod）
主要是vue项目vue.config.js中的publicPath路径配置不正确，具体看03-2步骤
08.nginx启动后运行的界面报 500 Internal Server Error主要是因为nginx.conf配置文件中的location配置有误，具体查看04-1步骤
