2019年5月16日 星期四

[Vue.js] 升級vue-cli3建立Vue專案


之前安裝vue-cli2來建立vue專案 --『[Vue.js] 在ubuntu安裝 Vue.js』,有需要可以參考。

開始安裝vue-cli 3
npm install --global @vue/cli

完成安裝後可以用指令檢查版本
vue --version
// or
vue -V

vue cli3多了一個 create 功能來建專案:
vue create [APP_NAME]
你可以使用預設選項或根據需求選擇,結束後會自動幫你執行 npm install

整個專案目錄精簡了不少,少了 config/build/ 兩個目錄,然後 static/ 改為 public/
執行下面指令就可以進入開發囉
npm run serve
vue cli不再使用dev當作開發環境的指令,如果你習慣用dev,可以到 package.json 修改script。



因為移除了 config/ ,因此『[Vue.js] 開發用和正式環境的參數設定方式(.env)』的方式勢必就要調整了。
在專案的根目錄新增兩個檔案 .env.env.production,分別用在開發和正式環境。所有的參數名稱必須加上前綴 VUE_APP_ ,只有名稱 VUE_APP_* 的參數,才能在vue專案裡使用。
1. .env
VUE_APP_NODE_ENV: '"development"'
VUE_APP_ROOT_API: '"http://localhost/api"'
2. .env.production
VUE_APP_NODE_ENV: '"production"'
VUE_APP_ROOT_API: '"https://example.com/api"'

使用方式和之前相同
export default {
  mounted() {
    console.log(process.env.VUE_APP_ROOT_API);
  }
}

關於環境變量,參考下面連結了解更多。
https://cli.vuejs.org/guide/mode-and-env.html#environment-variables


沒有留言:

張貼留言