vue.config.js 基本配置

官網配置參考

每次在終端運行 vue-cli-service 時，都會先找到對應的 vue.config.js，獲取到相關配置，才繼續執行其它操做

module.exports = {
  // 部署應用包時的基本 URL
  publicPath: process.env.NODE_ENV === 'production'
    ? '//your_url'
    : '/',
    
  // 運行 vue-cli-service build 時生成的生產環境構建文件的目錄
  // 默認構建前清除文件夾(構建時傳入 --no-clean 可關閉該行爲
  outputDir: 'dist',

  // 放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄
  assetsDir: 'static',

  // 指定生成的 index.html 的輸出路徑 (相對於 outputDir),也能夠是一個絕對路徑
  indexPath: 'index.html',

  // 生成的靜態資源在它們的文件名中包含了 hash 以便更好的控制緩存
  filenameHashing: true,

  // 當在 multi-page 模式下構建時，webpack 配置會包含不同的插件
  // (這時會存在多個 html-webpack-plugin 和 preload-webpack-plugin 的實例)。
  // 若是你試圖修改這些插件的選項，請確認運行 vue inspect
  pages: {
    index: {
      // page 的入口
      entry: 'src/pages/index/index.js',
      // 模板來源
      template: 'src/pages/index/index.html',
      // 在 dist 的輸出爲 index.html
      filename: 'index.html',
      // 當使用 title 選項時，
      // template 中的 title 標籤須要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: '首頁',
      // 在這個頁面中包含的塊，默認狀況下會包含
      // 提取出來的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 當使用只有入口的字符串格式時，
    // 模板會被推導爲 `public/subpage.html`
    // 而且若是找不到的話，就回退到 `public/index.html`。
    // 輸出文件名會被推導爲 `subpage.html`。
    
    // 多入口時，接着寫子頁面
    //subpage: 'src/subpage/main.js'
  },
  
  // eslint-loader 是否在保存的時候檢查
  lintOnSave: true,

  // 是否使用包含運行時編譯器的Vue核心的構建
  runtimeCompiler: false,

  // 默認狀況下 babel-loader 忽略其中的全部文件 node_modules，
  // 想要經過 Babel 顯式轉譯一個依賴，能夠在這個選項中列出來
  transpileDependencies: [],

  // 生產環境 sourceMap
  productionSourceMap: false,
  
  // 跨域設置 
  // 可取值參考： https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_settings_attributes
  crossorigin: undefined,
  
  // 構建後的文件是部署在 CDN 上的，啓用該選項能夠提供額外的安全性, 默認false
  integrity: false,
  
  // webpack 配置，鍵值對象時會合並配置，爲方法時會改寫配置
  // https://cli.vuejs.org/guide/webpack.html#simple-configuration
  configureWebpack: {
      plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  },
  //configureWebpack: (config) => {},

  // webpack 連接 API，用於生成和修改 webapck 配置
  // https://github.com/mozilla-neutrino/webpack-chain
  chainWebpack: (config) => {
    // 由於是多頁面，因此取消 chunks，每一個頁面只對應一個單獨的 JS / CSS
    config.optimization
      .splitChunks({
        cacheGroups: {}
      });

    // 'src/lib' 目錄下爲外部庫文件，不參與 eslint 檢測
    config.module
      .rule('eslint')
      .exclude
      .add('/Users/maybexia/Downloads/FE/community_built-in/src/lib')
      .end()
  },

  // 配置高於chainWebpack中關於 css loader 的配置
  css: {
    // false 時只有 *.module.[ext] 結尾的文件纔會被視做 CSS Modules 模塊
    // true 時能夠去掉文件名中的 .module， 並將全部的 *.(css|scss|sass|less|styl(us)?) 文件視爲 CSS Modules 模塊
    modules: false,
    
     // 是否使用 css 分離插件 ExtractTextPlugin，採用獨立樣式文件載入，不採用 <style> 方式內聯至 html 文件中
    // 生產環境下是 true，開發環境下是 false 
    extract: true,

    // 是否構建樣式地圖，設置爲 true 以後可能會影響構建的性能
    sourceMap: false,

    // css預設器配置項
    loaderOptions: {
      css: {
        // 這裏的選項會傳遞給 css-loader
      },

      postcss: {
        // 這裏的選項會傳遞給 postcss-loader
      }
    }
  },

  // 全部 webpack-dev-server 的選項都支持
  // https://webpack.js.org/configuration/dev-server/
  devServer: {
    open: true,

    host: '127.0.0.1',

    port: 3000,

    https: false,

    hotOnly: false,

    // 將任何未知請求 (沒有匹配到靜態文件的請求) 代理到該字段指向的地方 
    proxy: null,

    before: app => {
    }
  },
  // 構建時開啓多進程處理 babel 編譯
  // 是否爲 Babel 或 TypeScript 使用 thread-loader
  parallel: require('os').cpus().length > 1,

  // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},

  // 第三方插件配置
  pluginOptions: {}
};
複製代碼

拓展：

如何配置 vue-cli 3.0 的 vue.config.js