Vue CLI 部分问题

6月前

1. Vue CLI 生成的项目在 Safari 下无法热更新

此为 Safari bug，可以在 vue.config.js 加上：

module.exports = {
  chainWebpack: config => {
    // Fix safari cache bug
    if (process.env.NODE_ENV === 'development') {
      config
        .output
        .filename('[name].[hash].js')
        .end()
    }
  }
}

2. Vue CLI 生成的项目使用 CDN

在 vue.config.js 加上：

module.exports = {
  configureWebpack: config => {
    config.externals = {
      vue: 'Vue',
      'ELEMENT': 'ELEMENT'
    }
  }
}

然后在 index.html 引入相应的库：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue.js</title>
  </head>
  <body>
    <div id="root"></div>
    <% const suffix = NODE_ENV === 'development' ? '' : '.min' %>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.runtime<%= suffix %>.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.0/lib/index.js"></script>
  </body>
</html>

在 development 需要引入完整的库，如果引入类似 vue.runtime.min.js 以 .min.js 结尾的文件，在开发时会不方便调试错误。

3. Vue CLI 多页面项目

如果想用 @vue/cli 实现多页面，在 vue.config.js 加上：

module.exports = {
  pages: {
    page1: {
      entry: 'src/page1.js',
      template: 'public/page1.html',
      filename: 'page1.html',
      chunks: ['chunk-vendors', 'chunk-common', 'page1']
    },
    page2: {
      entry: 'src/page2.js',
      template: 'public/page2.html',
      filename: 'page2.html',
      chunks: ['page2']
    }
  }
}

虽然是多页面打包，但是 @vue/cli 依然会将所有页面使用过的公共库打包到一处，并未能按照单个页面依次分拆，可以在 vue.config.js 加上：

module.exports = {
  chainWebpack: config => {
    config.optimization.delete('splitChunks')
  }
}

评论（2）