1. 準備工作

前面文章已經介紹到怎樣在win10下安裝部署vuejs的webpack腳手架工具，關於怎樣使用vuejs的webpack工具寫專案不是本文的重點，現在預設我們已經寫好了我們的網站

• 我的用於學習測試的工程目錄：
  
• 修改src/router/index.js這個檔案中的路由配置：使用history模式和路由基目錄base的設定（更多資料可查閱官方文件）

/**** src/router/index.js ****/
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
 

import ItemPage from '@/components/ItemPage'
import NotFoundComponent from '@/components/NotFoundComponent'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: '/',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/page'
 
,
      name: 'page',
      component: ItemPage
    },
    {
      path: '*',
      name: 'NotFound',
      component: NotFoundComponent
    }
  ]
})

2. 打包vuejs工程

在工程的根目錄下執行指令：npm run build

• 很多部落格說要修改什麼路徑加個點，我看到一篇博文說其實不然，如果是這樣為什麼官方不預設直接幫我們加上呢？反正我沒有動config/index.js
• 執行完後會在工程根目錄下生成一個dist的資料夾，內容大概是這樣的：
  

3. 上傳檔案並配置nginx

• 把上面生成的dist整個資料夾的檔案上傳到公網可訪問的伺服器，假設這裡上傳到的位置是：/home/www/test/public

• 預設我們的伺服器已經成功安裝了nginx

  root@ubuntu:~# apt-get install nginx
  root@ubuntu:~# /etc/init.d/nginx start

• 修改nginx配置檔案（參考官方文件）

  server {
          listen 80;
          server_name ip或者域名;
          root /home/www/test/public;
          index index.html;
  
          location / {
                  try_files $uri $uri/ /index.html;
          }
  }

• 重啟nginx服務：[email protected]:~# service nginx restart

4. 訪問我們的網站

• 直接訪問ip或域名即webpack預設保留的主頁
• 訪問ip或域名/page可以訪問到我們自己寫好的page路由對應的頁面
• 正如官方文件所說，像上面那樣配置nginx之後，我們的伺服器不再返回404錯誤頁面，因為對於所有路徑都會返回index.html檔案。為了避免這種情況，所以我根據官方文件的建議寫了一個404頁面，也就是準備工作裡的NotFoundComponent，就是說：所有在vue路由找不到正確匹配的頁面都會返回定義好的404頁面，如下圖所示訪問的是ip或域名/he：
  

5. 一個彩蛋

上面的404頁面有一個a標籤，點選它是在當前頁面刷新出/page頁面的，也就是說沒有支援_blank屬性的a標籤。

一開始我單純使用a標籤是無法完成跳轉的，搜尋並查閱了一些資料，最後我是這樣寫的：

<p>You can visit our web <router-link to='/page'>here</router-link></p>

更多資料參考官方文件

6. 我的疑問

其實真正的實際情況是：我的伺服器的80埠已經被一個服務佔用了，折騰了大半天還是沒辦法解決使用80埠同時接管兩個服務的問題，最後我是使用了8080埠來接管我的vuejs專案的。

嘗試過二級域名的辦法，vuejs的主頁頁面會返回nginx的預設歡迎頁面；嘗試過各種location的匹配規則，依然沒有成功（慚愧=。=）

更新於2018/9/14

關於上面第六點的疑問，解決辦法是：兩個服務都要用二級域名，二級域名需要在域名管理商處進行解析註冊，修改完畢後的nginx配置如下：

修改/etc/nginx/sites-available/default檔案，包含兩個server塊，然後重啟nginx服務即可

• 服務站點1

server {
    listen 80;
    root /home/www/myflask;
    server_name web1.domain.cn;
    location / {
        try_files $uri =404;
        include uwsgi_params;
        uwsgi_pass 127.0.0.1:8001;   # 轉發請求到該地址埠
        uwsgi_param UWSGI_SCRIPT main:app;   # 呼叫的指令碼名稱和application變數名
    }
}

• 服務站點2

server {
    listen 80;
    root /home/www/web2/public;
    server_name web2.domain.cn;
    index index.html; 
    location / {
        try_files $uri $uri/ /index.html;
    }
}