前端vue项目简单部署于nginx

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配置的一些问题：

1.