VUE3.0 二. vue-cli3 配置指南

VUE3.0 二. vue-cli3配置指南

一.vue.config.js 詳解

官網地址： https://cli.vuejs.org/zh/config/

使用vue3 的時候需要添加一個vue.config.js

const path = require('path');
module.exports = {
  // 基本路徑
  publicPath: process.env.NODE_ENV === 'production' ? '' : '/',
  // 輸出文件目錄
  outputDir: process.env.NODE_ENV === 'production' ? 'dist' : 'devdist',
  // eslint-loader 是否在保存的時候檢查
  lintOnSave: true,
  /**
   * webpack配置,see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
   **/
  chainWebpack: (config) => {
  },
  configureWebpack: (config) => {
    // config.resolve = { // 配置解析別名
    //   extensions: ['.js', '.json', '.vue'],
    //   alias: {
    //     '@': path.resolve(__dirname, './src'),
    //     'public': path.resolve(__dirname, './public'),
    //     'components': path.resolve(__dirname, './src/components'),
    //     'common': path.resolve(__dirname, './src/common'),
    //     'api': path.resolve(__dirname, './src/api'),
    //     'views': path.resolve(__dirname, './src/views'),
    //     'data': path.resolve(__dirname, './src/data')
    //   }
    // }
  },
  // 生產環境是否生成 sourceMap 文件
  productionSourceMap: false,
  // css相關配置
  css: {
    // 是否使用css分離插件 ExtractTextPlugin
    extract: true,
    // 開啓 CSS source maps?
    sourceMap: false,
    // css預設器配置項
    loaderOptions: {},
    // 啓用 CSS modules for all css / pre-processor files.
    modules: false
  },
  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  parallel: require('os').cpus().length > 1,
  /**
   *  PWA 插件相關配置,see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
   */
  pwa: {},
  // webpack-dev-server 相關配置
  devServer: {
    open: false, // 編譯完成是否打開網頁
    host: '0.0.0.0', // 指定使用地址，默認localhost,0.0.0.0代表可以被外界訪問
    port: 8080, // 訪問端口
    https: false, // 編譯失敗時刷新頁面
    hot: true, // 開啓熱加載
    hotOnly: false,
    proxy: null, // 設置代理
    overlay: { // 全屏模式下是否顯示腳本錯誤
      warnings: true,
      errors: true
    },
    before: app => {
    }
  },
  /**
   * 第三方插件配置
   */
  pluginOptions: {}
}

跨域以及html，css以及其他的webpack模塊設置在vue.config.js中進行設置。具體的參數配置請參考官網。

二.項目結構以及配置說明：

以項目 harry-vue爲例：項目地址

這裏的dist、package.json、.env.development、.env.production、.env.staging、vue.config.js環境變量和模式等所需要的文件。我們簡單的瞭解一下

項目中，分爲開發環境和生產環境，如果每次都去做更改，就很麻煩，所以這裏要根據不同的腳本區分不同的環境模式

官網：

1 .env  在所有的環境中被載入
2 .env.local 在所有的環境中被載入，但會被 git 忽略
3 .env.[mode] 只在指定的模式中被載入
4 .env.[mode].local 只在指定的模式中被載入，但會被 git 忽略

在根目錄新建文件，文件的格式爲 .env.mode 分三個環境兩個打包環境一個開發環境，具體看自己項目需求而定

.env.development 文件，該文件是平時開發所用

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = 'api'
#（這裏這樣設置的目的是在開發中一般要設置跨域，這樣設置，在axios請求的時候就無需方法名前加/api/，因爲下面會設置默認的/api/）

# vue-cli使用VUE_CLI_BABEL_TRANSPILE_MODULES環境變量，
# 控制是否啓用babel-plugin-dynamic-import-node插件。
# 它只能通過將所有import（）轉換爲require（）來做一件事。
# 此配置可以顯着提高熱更新的速度，
# 當您有大量頁面時。
# 詳細信息：https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js

VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.production 文件是生產正式環境所用的

# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = '/prod-api'

.env.staging 文件是生產環境演示所用

NODE_ENV = production

# just a flag
ENV = 'staging'

# base api
VUE_APP_BASE_API = '/stage-api'

只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中。你可以在應用的代碼中這樣訪問它們
然後package.json文件scripts中添加該運行和打包腳本：

  "scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src",
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "test:ci": "npm run lint && npm run test:unit",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
  }

用法：vue-cli-service serve [options] [entry]

用法：vue-cli-service serve [options] [entry]
選項：
    –open 在服務器啓動時打開瀏覽器
    –copy 在服務器啓動時將 URL 複製到剪切版
    –mode 指定環境模式 (默認值：development)
    –host 指定 host (默認值：0.0.0.0)
    –port 指定 port (默認值：8080)
    –https 使用 https (默認值：false)

用法：vue-cli-service build [options] [entry|pattern]

用法：vue-cli-service build [options] [entry|pattern]
選項：
    –mode 指定環境模式 (默認值：production)
    –dest 指定輸出目錄 (默認值：dist)
    –modern 面向現代瀏覽器帶自動回退地構建應用
    –target app | lib | wc | wc-async (默認值：app)
    –name 庫或 Web Components 模式下的名字 (默認值：package.json 中的 “name” 字段或入口文件名)
    –no-clean 在構建項目之前不清除目標目錄
    –report 生成 report.html 以幫助分析包內容
    –report-json 生成 report.json 以幫助分析包內容
    –watch 監聽文件變化

其中的mode 就是指的是哪個環境，serve 默認的是development 在這裏指的就是development環境（就是文件名.env後面的development，不是文件中的代碼環境VUE_APP_ENV這個是自定義用於代碼中判斷所用。因爲項目中文件名就是【.env.development】，所以scripts中忽略了）
build默認的是production，指的就是production環境，同理也是文件名【.env.後綴】

這樣在實際項目中在main.js中直接設置其默認地址即可，會自動設置不同的地址

axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;

驗證的時候到了
在main.js中打印process.env

npm run  dev

可以看到.env.development中的數據被打印出來