在vue.config.js里怎么配置

在 `vue.config.js` 中配置可以通过以下方式实现：

1. 配置 CDN 引入：

module.exports = {
  configureWebpack: {
    externals: {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'axios': 'axios'
    }
  }
}

2. 配置 runtime-only 模式：

module.exports = {
  runtimeCompiler: false
}

3. 配置路由懒加载：

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})

4. 配置 babel-loader 的 cacheDirectory 选项：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('js')
      .use('babel-loader')
      .loader('babel-loader')
      .tap(options => {
        options.cacheDirectory = true
        return options
      })
  }
}

5. 配置 Tree Shaking：

module.exports = {
  configureWebpack: {
    optimization: {
      usedExports: true,
      minimize: true,
      sideEffects: false
    }
  }
}

6. 配置 scope hoisting：

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.optimize.ModuleConcatenationPlugin()
    ]
  }
}

7. 配置 PWA：

module.exports = {
  pwa: {
    name: 'My App',
    workboxPluginMode: 'GenerateSW',
    workboxOptions: {
      // 配置
    }
  }
}

8. 优化图片资源：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options => {
        options.limit = 102400
        return options
      })
  }
}