Vue-cli 3.x搭建專案還要做什麼？之一【新建專案與配置】

Ethan_Ceng發表於2019-03-14
Vue

寫在開頭

寫這個的原由：剛剛到新公司，就接手了兩個專案。年關得空把專案重構，升級 vue/cli 3.4.x。在重構過程中思考，留下點什麼，攢下幾篇文。 內容包括，cli搭建專案，vueconfig，router 配置，router 守衛，資料管理 和 store，axios網路封裝，一些小實踐，SVG，icon，utils，mixin等使用。
** 學習的時候，希望多翻閱文件，資料地址也會引入到原文 **

文章目錄

@vue/cli 3.4.0開始專案

開發環境：

  • Win10x64
  • node v10.15.0
  • npm v6.4.1
  • @vue/cli 3.4
// 安裝vue/cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli
複製程式碼

檢視是否安裝正確

vue --version
複製程式碼

初始化專案

vue create project-name
複製程式碼

Vue-cli 3.x搭建專案還要做什麼？之一【新建專案與配置】

  1. step.1 選擇設定，預設設定或者自定義Manually
    Vue-cli 3.x搭建專案還要做什麼？之一【新建專案與配置】
  2. step.2 自定義配置，新版本為Vue3做了準備，增加了 TypeScript支援，也看到了PWA，這裡暫時不選擇Vuex。是否需要Vuex,取決，對資料存放放思考。
    Vue-cli 3.x搭建專案還要做什麼？之一【新建專案與配置】
  3. step.3 路由模式選擇 history (history 模式和hash模式區別可以看vue-router文件，history模式需要對路由和nginx都需要稍加修改配置。)
    Vue-cli 3.x搭建專案還要做什麼？之一【新建專案與配置】
  4. step.4 CSS 編譯器選擇，這部分在vue/cli 3.x也更新了，各位看官，按需選擇。
    Vue-cli 3.x搭建專案還要做什麼？之一【新建專案與配置】
  5. step.5 ESLint 以及配置選擇，偏愛標準版
    Vue-cli 3.x搭建專案還要做什麼？之一【新建專案與配置】
  6. step.6 何時檢查 Lint
    Vue-cli 3.x搭建專案還要做什麼？之一【新建專案與配置】
  7. step.7 ESLint 配置檔案寫在哪裡，可以單獨檔案，也可以在package.json 依據個人選擇，不影響
    Vue-cli 3.x搭建專案還要做什麼？之一【新建專案與配置】
  8. step.8 是否儲存配置資訊，下次專案使用 N
    Vue-cli 3.x搭建專案還要做什麼？之一【新建專案與配置】

目錄結構

@vue/cli 3.4 初始化後的目錄結構

Vue-cli 3.x搭建專案還要做什麼？之一【新建專案與配置】
此時vue-cli建立的專案完成了，執行

npm run serve
複製程式碼

vue-cli 執行

vue/cli 3.X系列

Vue CLI.

！！！重要的事情說三遍，新手多看文件！！！
檔案目錄變簡潔了，以前的config，build，static，都不見。詳解在文件中，全部閱讀下來，也不花時間。細節這裡不說，使用上

webpack 相關

調整 webpack 配置最簡單的方式就是在 vue.config.js 中的 configureWebpack 選項提供一個物件：

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}
複製程式碼

該物件將會被 webpack-merge 合併入最終的 webpack 配置。

文件中，提及鏈式操作 (高階)、修改 Loader 選項、替換Loader、新建Loader、修改外掛，等等。

環境變數和模式

NODE_ENV
如果在環境中有預設的 NODE_ENV，你應該移除它或在執行 vue-cli-service 命令的時候明確地設定 NODE_ENV。

模式

模式是 Vue CLI 專案中一個重要的概念。預設情況下，一個 Vue CLI 專案有三個模式：

  • development 模式用於 vue-cli-service serve
  • production 模式用於 vue-cli-service build 和 vue-cli-service test:e2e
  • test 模式用於 vue-cli-service test:unit

注意模式不同於 NODE_ENV，一個模式可以包含多個環境變數。也就是說，每個模式都會將 NODE_ENV 的值設定為模式的名稱——比如在 development 模式下 NODE_ENV 的值會被設定為 "development"。

你可以通過為 .env 檔案增加字尾來設定某個模式下特有的環境變數。比如，如果你在專案根目錄建立一個名為 .env.development 的檔案，那麼在這個檔案裡宣告過的變數就只會在 development 模式下被載入。

你可以通過傳遞 --mode 選項引數為命令列覆寫預設的模式。例如，如果你想要在構建命令中使用開發環境變數，請在你的 package.json 指令碼中加入：

"dev-build": "vue-cli-service build --mode development",
複製程式碼

在客戶端側程式碼中使用環境變數

只有以 VUE_APP_ 開頭的變數會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中。你可以在應用的程式碼中這樣訪問它們：

console.log(process.env.VUE_APP_SECRET)
複製程式碼

vue.config.js

  • 有了 NODE_ENV 可以對不同環境做出不同的配置
  • 資料夾別名 resolve.alias
  • 設定代理 devServer，解決跨域開發問題
const path = require('path')

function resolve (dir) {
  return path.join(__dirname, './', dir)
}

// 專案部署基礎 (webpack 的 devServer 地址)
// process.env.NODE_ENV
// 正式環境 production
// 開發環境 development
// 預設情況下，我們假設你的應用將被部署在域的根目錄下,
// 例如：https://www.my-app.com/
// 預設：'/'
// 如果您的應用程式部署在子路徑中，則需要在這指定子路徑
// 例如：https://www.foobar.com/my-app/
// 需要將它改為'/my-app/'
const BASE_URL = process.env.NODE_ENV === 'production'
  ? '/my-app/'
  : '/'

module.exports = {
  // 這裡是對環境的配置，不同環境對應不同的BASE_API，以便 axios 的請求地址不同 baseUrl 從 Vue CLI 3.3 起已棄用，請使用publicPath
  publicPath: BASE_URL,
  // tweak internal webpack configuration.
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  // 如果你不需要使用eslint，把lintOnSave設為false即可
  lintOnSave: false,

  /**
   * 對內部的 webpack 配置進行更細粒度的修改
   * https://github.com/neutrinojs/webpack-chain see
   * https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
   * @param config
   */
  chainWebpack: (config) => {
    // key,value自行定義，比如.set('@@', resolve('src/components'))
    config.resolve.alias
      .set('@', resolve('src'))
      .set('api', resolve('src/api'))
      .set('common', resolve('src/common'))
      .set('components', resolve('src/components'))
  },
  /**
   * 調整 webpack 配置
   * https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
   * @param config
   */
  configureWebpack: config => {
    // 生產and測試環境
    let pluginsPro = []
    // 開發環境
    let pluginsDev = []
    if (process.env.NODE_ENV === 'production') {
      // 為生產環境修改配置... process.env.NODE_ENV !== 'development'
      config.plugins = [...config.plugins, ...pluginsPro]
    } else {
      // 為開發環境修改配置...
      config.plugins = [...config.plugins, ...pluginsDev]
    }
  },
  // 打包時不生成.map檔案
  productionSourceMap: false,
  // webpack-dev-server 相關配置 https://webpack.js.org/configuration/dev-server/
  // 這裡寫你呼叫介面的基礎路徑，來解決跨域，如果設定了代理，那你本地開發環境的axios的baseUrl要寫為 '' ，即空字串
  // devServer: {
  //   proxy: 'localhost:3000'
  // }
  devServer: {
    // host: 'localhost',
    host: '0.0.0.0',
    port: 8000, // 埠號
    https: false, // https:{type:Boolean}
    open: true, // 配置自動啟動瀏覽器
    hotOnly: true, // 熱更新
    // 配置跨域處理,只有一個代理
    proxy: {
      '/my-app/*': {
        target: 'http://xxx.xxx.xxx.xxx:xxxx/',
        changeOrigin: true,
        pathRewrite: {
          '^/my-app': ''
        }
      },
      '/SocketWeb/*': {
        target: 'http://xxx.xxx.xxx.xxx:xxxx',
        changeOrigin: true,
        // websocket支援
        ws: true,
        secure: false
      }
    }
  }
}

複製程式碼
開發基礎環境可以了，開發中遇到的資料夾別名，請求跨域的問題解決了，自定義配置，也可以更具自己公司的情況配置。還有比較自定義的部分可以參照文件配置。

相關文章