Table of Contents generated with DocToc
最近因為項目需要，我要把vue-cli打包后的dist文件夾部署到阿里雲服務器，這個真的整了我很久很久。。。從最開始使用 tomcat 服務器部署，到后面使用 nginx 服務器部署。
一、tomcat部署的問題
我把dist文件夾中的內容放到 tomcat/webapps/ROOT下：
然后運行tomcat，發現靜態文件是沒有問題的，但是請求后端接口的時候報404錯：
在網上找了很多辦法，有不少人遇到這個問題，但是基本都沒有詳細的解決方案，后面看到有博客說可以試試用nginx反向代理的方式，然后才有了后續解決辦法。
二、centos服務器安裝nginx
centos7服務器使用命令安裝環境：
yum -y install gcc pcre-devel zlib-devel openssl openssl-devel
nginx下載地址：http://nginx.org/download/nginx-1.14.2.tar.gz
然后解壓到對應目錄：
tar -zxvf nginx-1.14.2.tar.gz
進入nginx文件夾，執行如下命令：
./configure
（網上也有說：./configure --prefix=/usr/local/nginx【安裝目錄】），但是我這里prefix報錯了
然后：
make
make install
基本安裝就完成了【目錄結構如下】：
三、nginx配置
3.1 將dist文件夾上傳到服務器
我將dist文件夾放到/home/dist
3.2 配置nginx.conf
server {
listen 8083;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /home/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html; //解決刷新頁面變成404問題的代碼
}
location /api{
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://localhost:8091;
}
}
listen：表示監聽端口8083
location：dist文件夾放置的位置
/api：因為vue前端代理的時候，用的是api做名字，所以我們要在此處配置后端api端口：
//vue代理
proxyTable: {
'/api': {
target: 'http://localhost:8091',
pathRewrite: {'^/api': ''}
}
},
至此上述配置已完成。
3.3 啟動nginx
定位到/home/nginx-1.14.2/objs文件夾下，可以看到里面的結構為：
nginx文件即為啟動文件，我們有如下基礎命令可以使用：
| 命令 | 作用 |
|---|---|
./nginx -c /home/nginx-1.14.2/conf/nginx.conf |
啟動nginx【攜帶配置文件】 |
./nginx -s reload |
當配置文件更改時，可以使用此命令重啟nginx |
ps -ef|grep nginx2 |
查看當前nginx進程 |
我們使用啟動命令即可即可
之后便可以在對應ip的8083端口號訪問了