第一步：Vue專案的搭建

1：首先需要安裝node.js和npm
開啟cmd命令列，首先安裝node
步驟：https://nodejs.org/en/download/ node官網，選擇跟自己的電腦匹配的版本進行下載，然後一步步的安裝即可，輸入node -v，如果出現版本資訊即表示安裝成功。（附百度網盤連結連結：https://pan.baidu.com/s/1_tTMryRtsTnIJ4vAI_ZMkg 密碼：3zc0）

2：npm包管理器是整合在node中的，所以直接輸入npm -v就能檢視到版本資訊
3：安裝vue（npm install -g vue-cli –registry=https://registry.npm.taobao.org

）
4：輸入npm install -g cnpm –registry=http://registry.npm.taobao.org ，安裝淘寶映象安裝相關依賴
5：安裝vue-cli腳手架構建工具，輸入命令 npm install -g vue-cli，安裝完成即可。
6：選定路徑，新建vue專案
7：進入上一步得目錄下新建專案，指令vue init webpack +專案名稱
（依次按照提示輸入，專案名、專案描述、專案作者等等，最後這個專案就建立好了）
8：進入到專案的資料夾下
9：執行專案，指令npm run dev
10:在瀏覽器中開啟這個網址，就能看到

第二步： 專案的配置

1.在檔案生成時候會預設生成config資料夾，在資料夾下面會有專案的各種配置資訊
在index檔案中，可以設定本地訪問路徑和外部訪問路徑，本地訪問路徑為和埠預設設定‘localhost 和 8080，如果需要改動只可將本地路徑和埠號改變即可，檔案程式碼為（host: ‘localhost’, port: 8080, ）
設定外部訪問時候需要在proxyTable中設定，原始碼為

proxyTable: {
'/api': {
target: 'http://localhost:8000/', //（這裡是代理介面的位置）
changeOrigin: true, //（允許跨域，如果這不寫，呼叫介面介面時會有跨域錯誤說缺少請求頭）
 

pathRewrite: {'^/api': '' } //（路由規則下面詳細介紹）
}
},

其中/api 為在請求路由中如果含有api時候預設請求代理介面，否則預設請求本機介面
2.在設定完index檔案之後，在其他三個檔案同樣也需要設定埠，在開發測試環境中，都需要將埠設為同代理埠
程式碼事例如下：

dev.env.js
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_HOST: '"http://localhost:8000"' // 開發環境介面地址(這裡是增加的內容)
})

Prod.env.js
'use strict'
module.exports = {
NODE_ENV: '"production"',
API_HOST: '"http://localhost:8000"' // 正式環境介面地址(這裡是增加的內容)
}
test.env.js
const merge = require('webpack-merge')
const devEnv = require('./dev.env')
module.exports = merge(devEnv, {
NODE_ENV: '"testing"'
})
dev.env.js裡面是開發環境的變數
prod.env.js裡面是生產環境的變數。
test.env.js裡面是測試環境的變數。

第三步：Vue專案的釋出

1.先從網上拉去一個nginx映象，在這裡我拉取的是163的映象（docker pull hub.c.163.com/library/nginx）
2.配置dockerfile，其中dockerfile在根目錄下面，
使用Nginx
FROM hub.c.163.com/library/nginx liuze
MAINTAINERliuze

server {
listen 8080;  # 監聽埠8080
server_name 192.168.99.100;
#charset koi8-r;
#access_log /var/log/nginx/log/host.access.log main;
location / {
try_files $uri $uri/ /index.html;
root /usr/share/nginx/html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}

4.在發起網路請求是會有vue專案請求和網路請求：
在中介軟體配置檔案中可以進行請求url重新定向，傳送請求是網路請求可以在請求前加上api，當請求中含有api時候請求將會被替換成網路埠

Axios.interceptors.request.use(
    config => {
        config.url = config.url.replace(‘/api’,‘http://0.0.0.1:8010’) # 將含有api的欄位替換
        let tbkt_token = localStorage.getItem("Token") || '';
        if(tbkt_token) config.headers['Token'] = tbkt_token;
        return config
    },
    err => {
        return Promise.reject(err)
    }
);