nginx安装
- 前提是nginx已经下载好，并且已经解压（注意：解压的时候文件路径中不能出现中文）
- 解压好之后，在nginx文件下打开命令提示符（cmd），输入指令：start nginx.exe
- 在浏览器地址栏输入localhost或者是localhost:80（默认80端口），页面会出现“welcome to nginx类似的字样”，说明已经成功打开nginx。
vue项目打包部署
- 在vue项目下进行npm run build。
- 将打包好的dist文件夹（整个文件夹）放入nginx文件下的html文件夹下
- 在nginx配置文件conf文件夹下的nginxconf文件在添加配置信息，信息如下：
server {
# 表示监听前端服务器端口8080的端口，即在浏览器地址栏输入localhost:8080，即可访问html文件下dist文件夹中的index.html文件。
listen 8080；
# 服务的ip为localhost
server_name localhost；
# 会去nginx服务器下哪个位置寻找文件，下面的写法就是说在nginx下的html文件夹下的dist文件夹下的index.html
location / {
root html/dist；
xxxxx index.html index.htm;
# 这句话是为了在打开index页面后，再次刷新，浏览器报出404的问题
try_files %uri %uri/ /index ;
}
# 这边是配置了反向代理，当浏览器访问的是“/api”这个资源的时候，会访问3001端口的资源
location /api {
proxy_pass http：//localhost：3001；
}
}
- 此时浏览器地址栏输入localhost：8080，即可正常使用。
打包已经nginx配置的一些问题：