vue-cli 3.0 vue.config.js配置

baseUrl

baseUrl: process.env.NODE_ENV === 'production'? '/static' : '/',

打包后的输出目录

outputDir: '../static',

静态资源打包地址

assetsDir: './assets',

保存时是不是用eslint-loader来lint代码

lintOnSave: true,

page配置

index: {
  // 入口文件
  entry: './src/main.js',
  // 模版文件
  template: 'public/index.html',
  // 输出文件名
  filename: 'index.html'
}

是否使用包含运行时编译器的Vue内核版本

runtimeCompiler: true,

使用runtime-only还是in-browser compiller

compiler: false,

webpack配置

chainWebpack: () => {},
configureWebpack: () => {},

vue-loader配置

https://vue-loader.vuejs.org/en/options.html

vueLoader: {},

是否需要生产环境的sourceMap，默认true

productionSourceMap: true,

CSS相关

css: {
  // 是否提取css生成单独的文件 默认 true
  extract: true,
  // 使用 CSS source maps?
  sourceMap: false,
  // loader配置
  loaderOptions: {},
  // 使用 css Modules
  modules: false
},

使用多线程否

parallel: require('os').cpus().length > 1,

使用autoDLLPlugin

dll: false,

pwa相关

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

pwa: {},

dev server相关配置

使用package devsever配置无法热更新

devServer: {
  host: '192.168.54.107',
  port: 8071,
  https: false,
  hotOnly: true,
  proxy: {
    '/api': {
      target: '<url>',
      ws: true,
      changeOrigin: true
    },
    '/foo': {
      target: '<other_url>'
    }
  }
}

这里说一下热更新有可能失效的情况

• 用npm安装
• server配置写在config.js里面，在package里面会失效

配置示例

const path = require('path');
const Compression = require('compression-webpack-plugin')   // gzip压缩
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin // 包的大小分析工具

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

const debug = process.env.NODE_ENV === 'production'

module.exports = {
  publicPath: debug ? '/public/static/' : '/',
  chainWebpack: config => {
    config.resolve.alias
      .set('js', resolve('src/assets/js'))
      .set('css', resolve('src/assets/css'))
      .set('img', resolve('src/assets/img'))
      .set('public', resolve('src/components/public'))
  },
  devServer: {
    port: 8090,
    open: false, // 是否自动打开浏览器页面
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        ws: true,
        changeOrigin: true,  //是否跨域
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  productionSourceMap: false, //如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
  configureWebpack: config => {    // gzip压缩
    if (debug) {
      return {
        plugins: [
          new Compression({
            test: /\.js$|\.html$|\.css/,    // 匹配文件名
            threshold: 10240,               // 对超过10k的数据进行蒴
            deleteOriginalAssets: false,    // 是否删除源文件
          })
        ]
      }
    }
    // if (!debug) {
    //   return {
    //     plugins: [
    //       // 使用包分析工具
    //       new BundleAnalyzerPlugin()
    //     ]
    //   }
    // }
  },
  pages: {
    index: {
      // entry for the page
      entry: 'src/main.js',
      // the source template
      template: 'public/index.html',
      // output as dist/index.html
      filename: 'index.html',
      publicPath: '/',
      // when using title option,
      // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'PandaDeal',
      // chunks to include on this page, by default includes
      // extracted common chunks and vendor chunks.
      // chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // when using the entry-only string format,
    // template is inferred to be `public/subpage.html`
    // and falls back to `public/index.html` if not found.
    // Output filename is inferred to be `subpage.html`.
    // subpage: 'src/subpage/main.js'
  },
  lintOnSave: process.env.NODE_ENV !== 'production',
  // chainWebpack: (config) => {
    // config.resolve.alias
    // .set('@$', resolve('src'))
    // .set('assets', resolve('src/assets'))
    // .set('components', resolve('src/components'))
    // .set('layout', resolve('src/layout'))
    // .set('base', resolve('src/base'))
    // .set('static', resolve('src/static'))
    // .set('Com', resolve('src/utils/utils'))
    // .set('wx', 'weixin-js-sdk')
  // }
}