Vue-cli架設網站的�基本設置

上德 2018/10/12

Vue-cli架設前端網站

• 主要環境：

vue-cli 3.0.0-rc.3 (webpack4) �

• webapck安裝

npm install webpack -g

npm install webpack-cli -g �

• vue-cli

yarn安裝 yarn global add @vue/cli

或npm安裝 npm install -g @vue/cli

確認版本 vue -V �

• vue-cli建立專案

有兩種方式：

1.執行GUI介面 

vue ui

2.指令

vue create <project-name>

重要！不要裝到舊版的了

目前thunder-ui有使用的設置

eslint在vscode中如無作用之解決方式

element-ui

​

• 官網

https://element.eleme.io/#/zh-CN

​

• 簡易安裝方式

https://github.com/ElementUI/vue-cli-plugin-element

​

• 會選擇element-ui單純是因為他是目前星星數最多的vue ui框架

其他也還是有很多選擇，可參考https://risingstars.js.org/2017/zh/#section-all

​

thunder-ui專案使用方式

請用此專案開Branch來開發�（未來以研發部規則為主）

我的gitignore設定�.sass-cache/

node_modules/

dist/

外部檔案放置原則

• 不使用webpack打包之靜態資源皆放在public/資料夾下，例：

.js (es5)

.css

圖片檔

​

• 使用webpack打包之資源皆放在assets/資料夾下，例：

.js (使用import語法之es6 javascript)

.scss (預編譯css)

.vue

開發模式及生產模式

• 開發模式在本機端建立本機server，可熱更新並能使用debug tool

yarn serve

或npm serve

​

• 生產模式透過webpack打包成可執行之靜態檔案，但需放上web server並設置正確路徑（如需在本機測試可用vscode的live server）

yarn build

或npm build

環境變數

• 必須以VUE_APP_開頭

​

• 在src/底下的js中使用環境變數範例：process.env.VUE_APP_SECRET

不同模式的環境變數

資料來源：https://segmentfault.com/a/1190000015133974

增加staging模式

Step1 增加stage模式(自訂)

"dev-build": "vue-cli-service build --mode development" �

Step2 建立.env.stage檔

NODE_ENV = 'production’

VUE_APP_MODE = 'stage’

outputDir = 'stage’

​

Step3 在vue.config.js設定輸出路徑

module.exports = {

outputDir: process.env.outputDir

}

使用環境變數範例

let baseUrl: string = ''

switch (process.env.VUE_APP_MODE) {

case 'serve':

baseUrl = 'http://localhost:57156/api/'

break

case 'build':

baseUrl = 'http://choose.blueplanet.com.tw/api/'

break

}

export default baseUrl

改變網頁logo

• <%= BASE_URL %> 對應vue.config.js所設定根目錄路徑
• favicon.ico為預設路徑，都會在專案編譯時被vue預設logo給覆蓋過去，所以需更改他的名稱才能替換掉（有沒有人能幫忙研究其他更改方式？）

Router的 History mode

• 無使用history mode之網址→ http://domain-name/index.html#/login
• history mode之網址→ http://domain-name/login

​

• History模式預設是關閉的，如要使用必須增加 mode: 'history'

​

​

​

• 使用history mode時，web server必須將vue網站路徑指向根目錄才能使用否則會失效

​

改變根目錄路徑方式

Step1 在vue.config.js中增加路徑變數baseUrl（如不設置的話預設就是根目錄）

​

Step2 public/index.html中所引入的檔案路徑前都要加上

<%= BASE_URL %>

例<script src="<%= BASE_URL %>wasa/general.js"></script>

​

Step3 記得不能使用history mode（預設是關閉的）

本機測試方式

1. console.log()

​

• 使用debugger下斷點

​

• Chrome中下斷點

​

• * Vue debug tool

vue debug tool