Vue 项目初始化（一）—— 常用配置

  Vue 项目初始化较为简单，常用的基础配置可参考 https://github.com/staven630/vue-cli4-config。

¶常用参考

var path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  transpileDependencies: [/shengya-ui/],
  productionSourceMap: false, // 生产环境的 source map
  devServer: {
    host: '0.0.0.0',
    port: '9000',
    disableHostCheck: true  // 解决127.0.0.1指向其他域名时出现"Invalid Host header"问题
  },
  configureWebpack: {
    externals: {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      vuex: 'Vuex',
      axios: 'axios',
      vant: 'vant',
      'dingtalk-jsapi': 'dd'
    }
  },
  publicPath: process.env.NODE_ENV !== 'development' ? './' : '/',
  outputDir: 'dist',
  chainWebpack: config => {
    // key, value自行定义，比如.set('@@', resolve('src/components'))
    config.resolve.alias.set('vue$', 'vue/dist/vue.common.js')
      .set('@', resolve('src'))
      .set('mixData', resolve('src/mixins/mixData'))

    const cdn = {
      css: ['//wise-job.oss-cn-zhangjiakou.aliyuncs.com/webjs/libs/vant/index.css'],
      js: [
        '//wise-job.oss-cn-zhangjiakou.aliyuncs.com/webjs/libs/vue/v2.6.11.min.js',
        '//wise-job.oss-cn-zhangjiakou.aliyuncs.com/webjs/libs/vue-router/v3.1.6.min.js',
        '//wise-job.oss-cn-zhangjiakou.aliyuncs.com/webjs/libs/vant/v2.9.0.min.js',
        '//wise-job.oss-cn-zhangjiakou.aliyuncs.com/webjs/libs/vuex/v3.1.2.min.js',
        '//wise-job.oss-cn-zhangjiakou.aliyuncs.com/webjs/libs/axios/v0.19.2.min.js',
        '//wise-job.oss-cn-zhangjiakou.aliyuncs.com/webjs/libs/dingtalk-jsapi/dingtalk.open.js'
      ]
    }
    // 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中
    config.plugin('html').tap(args => {
      // html中添加cdn
      args[0].cdn = cdn
      return args
    })
  },
  css: {
    loaderOptions: {
      // pass options to sass-loader
      sass: {
        // @/ is an alias to src/
        // so this assumes you have a file named `src/variables.scss`
        data: `@import '@/assets/stylesheets/scss/mixins/_variables.scss';`
      },
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 37.5, // 效果图375
            propList: ['*'], // 属性的选择器，*表示通用
            selectorBlackList: ['.px-'] //   忽略的选择器   .ig-  表示 .ig- 开头的都不会转换
          })
        ],
        /*
        ** You can extend webpack config here
        */
        extend(config, ctx) { }
      }
    }
  }
}