vue-cli@3.0的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) => {
    // 修復HMR
    config.resolve.symlinks(true)
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))
  },
  configureWebpack: (config) => {
    config.resolve = { // 配置解析別名
      extensions: ['.js', '.json', '.vue'],
      alias: {
        '@': path.resolve(__dirname, './src'),
        'components': path.resolve(__dirname, './src/components'),
        'common': path.resolve(__dirname, './src/common'),
        'api': path.resolve(__dirname, './src/api'),
        'router': path.resolve(__dirname, './src/router'),
        'views': path.resolve(__dirname, './src/views'),
        'data': path.resolve(__dirname, './src/data'),
        'public': path.resolve(__dirname, 'public')
      }
    }
  },
  // 生產環境是否生成 sourceMap 文件
  productionSourceMap: false,
  // css相關配置
  css: {
    // 是否使用css分離插件 ExtractTextPlugin
    // extract: true,
    // 開啟 CSS source maps?
    sourceMap: false,
    // css預設器配置項
    loaderOptions: {},
    // 啟用 CSS modules for all css / pre-processor files.
    requireModuleExtension: 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: true, // 編譯完成是否打開網頁
    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: {}
}

// 全局導入樣式
function addStyleResource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, './src/common/stylus/index.styl')
      ]
    })
}