搭建vue前端 - 打包vue工程部署到nginx下

搭建vue前端

1. 安裝nginx

1） 安裝nginx

• 下載nginx的安裝包：http://nginx.org/en/download.html
• 先安裝一些依賴包：yum install pcre-devel zlib-devel -y
• 解壓：tar -zxvf nginx-1.10.3.tar.gz
• 去解壓目錄：cd nginx-1.10.3
• 執行配置： ./configure --prefix=/usr/local/nginx --with-http_ssl_module
  （–prefix指的是安裝路徑，–with 安裝所依賴的庫文件） 如果執行過程報錯部分依賴文件，安裝之後在執行即可。
  
• 編譯安裝： make -j4 && make install
• 查看安裝結果：
  whereis nginx nginx安裝路徑
  /usr/local/nginx/sbin/nginx -v 查看版本

2） 修改nginx.conf

• vim /usr/local/nginx/conf/nginx.conf

server {
 36         listen       80;
 37         server_name  localhost;
 38 
 39         #charset koi8-r;
 40 
 41         #access_log  logs/host.access.log  main;
 42 
 43         location / {
 44             root   vue 上傳內容的路徑;                 #  vue 上傳內容的路徑
 45             index  index.html index.htm;
 46             try_files $uri $uri/ /index.html;       #  解決vue路由history模式404問題
 47         }

3） 啓動nginx

• 重啓：/usr/local/nginx/sbin/nginx -s reload
• 啓動：/usr/local/nginx/sbin/nginx
• 查看進程：ps -ef | grep nginx

2. 部署vue前端

• 本地build: npm run build ， build後/dist文件夾下static 、index.html需要上傳；
• 把 /dist static 、index.html上傳到nginx 裏配置的文件夾下；
• 可以通過 機器ip訪問；
• 注： 帶上路由路徑直接訪問會提示404， 需要在nginx配置中加上try_files $uri $uri/ /index.html; 因爲當 URL 改變時，頁面不會重新加載，也就是說不會向服務器重新請求資源。（https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90）