nginx配置vue打包项目（亲测有效）Uncaught SyntaxError: Unexpected token ‘＜‘ app.30bad5 500 Internal Server Error

01.安装

1. 安装nginx（不同版本会导致某些指令运行不成功）

链接: https://pan.baidu.com/s/1yNpxhz5HZMZCd7C4RmpNBg 提取码: 5rze

2.解压到目录（例如：D:\nginx）下然后在文件目录路径输入框输入cmd

3.然后输入start nginx并进行回车

4.在浏览器输入http://localhost:8080/出现如下图所示的内容代表着运行成功

02.配置

1.界面配置

如下图所示，通过http://localhost:8080/访问到的界面出现的内容就是通过下图的html文件夹中的index.html进行配置，那么vue的html文件也是放到html目录下进行配置

2.项目配置

配置界面的文件都是放在html项目里，那么这时候创建一个目录，目录下面用于存放vue项目，html文件下可以创建多个文件夹也代表着可以配置多个代理

3.创建多个nginx环境代理

在html目录下面创建test、dev、prod代表着测试环境、开发环境、生产环境的代理项目

03.vue项目配置

1.首先配置测试环境的配置项

1.1配置router

给router下的index.js文件中的VueRouter配置base参数，值为test代表着测试环境，如下图所示

2.配置vue.config.js

给vue.config.js文件中的publicPath配置测试环境（注意：这里对base配置多一个/），如下图所示

3.配置测试环境的接口地址

4.执行打包命令（测试环境）

5.将dist目录中的文件复制到html-test文件中，如下图所示

04.配置nginx-conf中的nginx.conf配置文件（主要配置server项）

1.配置location

location ^~/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项目的界面，如下图所示

06.其他环境

只需要重复03-3步骤即可
通过打包前配置不同环境，打包后将不同环境的包分别放到对应的环境文件即可（test、dev、prod）

07.成功运行的vue代理项目刷新后报 Uncaught SyntaxError: Unexpected token ‘<’ app.30bad5 并出现空白页

主要是vue项目vue.config.js中的publicPath路径配置不正确，具体看03-2步骤

08.nginx启动后运行的界面报 500 Internal Server Error

主要是因为nginx.conf配置文件中的location配置有误，具体查看04-1步骤