Vue CLI3.x 配置指南「初識Vue CLI3.x 版本」

前言

因爲以前的項目中都是用的vue-cli 2.x 版本，最近新開的項目使用了vue-cli 3.x 版本的腳手架，所以總結一下筆記，方便之後查看使用。

關於舊版本

Vue CLI 的包名稱由 vue-cli 改爲了 @vue/cli。 若是你已經全局安裝了舊版本的 vue-cli (1.x 或 2.x)，你須要先經過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。

Node 版本要求

Vue CLI 須要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。你可使用 nvm 或 nvm-windows 在同一臺電腦中管理多個 Node 版本。

安裝

可使用下列任一命令安裝這個新的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli
複製代碼

安裝以後，你就能夠在命令行中訪問 vue 命令。你能夠經過簡單運行 vue，看看是否展現出了一份全部可用命令的幫助信息，來驗證它是否安裝成功。

你還能夠用這個命令來檢查其版本是否正確：

vue --version
複製代碼

建立項目

當你安裝vue-cli 3.x版本之後，在使用之前2.x版本的命令安裝已經不成功了，須要按照如下方式

拉取 2.x 模板 (舊版本)

Vue CLI >= 3 和舊版使用了相同的 vue 命令，因此 Vue CLI 2 (vue-cli) 被覆蓋了。若是你仍然須要使用舊版本的 vue init 功能，你能夠全局安裝一個橋接工具：

npm install -g @vue/cli-init
# `vue init` 的運行效果將會跟 `vue-cli@2.x` 相同
vue init webpack my-project
<!--經過如下命令建立項目-->
vue init webpack myApp
複製代碼

建立 3.x 模版 (新版本)

運行如下命令來建立一個新項目：

vue create hello-world
複製代碼

你會被提示選取一個 preset。你能夠選默認的包含了基本的 Babel + ESLint 設置的 preset，也能夠選「手動選擇特性」來選取須要的特性。

經過方向鍵選擇特性，空格確認插件，回車確認完成選項 ===> 這裏我選擇了手動配置(Manually)

添加了Babel和Vuex和Router還有CSS Pre-processors插件

接下來會讓你選擇router的模式，默認回車

接下來會讓你選擇CSS Pre-processors的格式，這裏選擇了Sass/SCSS (with node-sass)

最後咱們選擇配置文件格式爲package.json，而後保存配置便可完成。

項目結構如圖：

配置參考

vue.config.js

vue.config.js 是一個可選的配置文件，若是項目的 (和 package.json 同級的) 根目錄中存在這個文件，那麼它會被 @vue/cli-service 自動加載。你也可使用 package.json 中的 vue 字段，可是注意這種寫法須要你嚴格遵守 JSON 的格式來寫。

這個文件應該導出一個包含了選項的對象：

// vue.config.js
module.exports = {
  // 選項...
}
複製代碼

以上內容都是vuecli官方文檔有的。你們也能夠直接去看官網文檔，接下來我將記錄本身項目中的一些配置。

// vue.config.js
module.exports = {

  <!--全部的資源都會被連接爲相對路徑, 此屬性至關於2.x中的 assetsPublicPath-->
  publicPath: './',
  
  <!--生產環境構建文件的目錄-->
  outputDir: 'dist', 
  
  <!--放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄。-->
  assetsDir: 'static', 

  <!--是否在開發環境下經過 eslint-loader 在每次保存時 lint 代碼。-->
  <!--這個值會在 @vue/cli-plugin-eslint 被安裝以後生效。-->
  lintOnSave: process.env.NODE_ENV === 'development',
  
  <!--若是你不須要生產環境的 source map，能夠將其設置爲 false 以加速生產環境構建。-->
  productionSourceMap: false, 
  
  <!--全部 webpack-dev-server 的選項-->
  devServer:{
    <!--端口號-->
    port: process.env.port || 9527,
    
    <!--dev-server在服務器啓動後打開默認瀏覽器-->
    open: true，
    
    <!--出現編譯器錯誤或警告時，在瀏覽器中顯示全屏覆蓋。-->
    overlay: {
      <!--不顯示警告-->
      warnings: false,
      
      <!--顯示錯誤-->
      errors: true
    },
    
    <!--若是你的前端應用和後端 API 服務器沒有運行在同一個主機上，
    你須要在開發環境下將 API 請求代理到 API 服務器。-->
    proxy: {
      '/api': {
        target: 'http:www.baidu.com', // 要代理的API地址
        changeOrigin: true, // 容許跨域
        pathRewrite: {
            <!--這裏理解成用'/api'代替target裏面的地址，後面組件中咱們掉接口時直接用api代替--> 
            <!--好比我要調用'http://www.abc.com/user/add'，直接寫'/api/user/add'便可'--> '^/api' : '' } }, '/foo': { target: '<other_url>' ...... } } }, configureWebpack: { name: name, resolve: { <!--設置別名--> alias: { '@': resolve('src') } } } } 複製代碼

以上就是部分配置內容，很簡單基本看文檔就能看懂。

配置環境變量

在3.x版本中，咱們直接在根目錄下新建.env.development與.env.production還有.env.test文件用來設置不一樣環境下的某些變量的不一樣屬性。例如：

• 本地環境也就是開發環境

• 生產環境

• 測試測試

一般咱們會在封裝axios中去設置baseUrl地址，這樣就能夠根據不一樣環境去調用不一樣的api地址

最後在打包的時候添加一下環境變量，以此來選擇打包出的文件是什麼環境下的

結尾

關於Vue CLI3.x版本的不少配置文檔都說明的很清楚，但實際上本身用起來發現會看不會寫，我會在項目中逐漸將用到的一些配置都寫成筆記，方便你我之後查看。

❤️ 看完幫個忙

若是你以爲這篇內容對你挺有啓發，我想邀請你幫我個小忙：

1. 點贊，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓 -_-）

2. 關注公衆號「番茄學前端」，我會定時更新和發佈前端相關信息和項目案例經驗供你參考。

3. 加個好友， 雖然幫不上你大忙，可是一些業務問題你們能夠探討交流。