之前安裝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 servevue 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
沒有留言:
張貼留言