详解vue.config.js的特殊配置说明

721 阅读1分钟
 configureWebpack: {
    optimization: {
      minimize: process.env.NODE_ENV === 'production',
    },
    resolve: {
      extensions: ['.js', '.vue', '.ts', '.json'],
      alias: {
        '@': path.join(__dirname, '/'),
      },
    },
    externals: {
      vue: 'Vue',
      vuex: 'Vuex',
      'vue-router': 'VueRouter',
    },
    plugins: process.env.NODE_ENV === 'production' ? [] : [],
  },

在 vue.config.js 文件中,externals 配置选项是用来指定不应该被 webpack 打包的模块,而是在运行时从环境中获取。这意味着这些模块应该作为外部依赖存在,而不是被包含在最终的 bundle 中。

这意味着 webpack 将不会打包 Vue、Vuex 和 Vue Router,而是假设这些库在运行时是可用的。这通常用于库开发,当你想要创建一个库,并希望用户能够自己提供这些依赖项,而不是将它们打包进库中。 此时就需要在html中引入对应的js,

html:

 <script src="https://cdnweb.ciccwm.com/zzt/static/js/vue/vue2.7.runtime.min.js"></script>
 <script src="https://cdnweb.ciccwm.com/zzt/static/js/vue/vue-router.min.js"></script>

然而,对于大多数 Vue CLI 创建的项目来说,你通常想要 webpack 将这些依赖项打包进最终的 bundle 中,以便在没有这些全局变量可用的环境中也能运行。因此,externals 配置在这里可能是不合适的。

如果你想要确保 Vue、Vuex 和 Vue Router 是从项目中读取的,而不是作为外部依赖,你应该移除或注释掉。