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

山水有轻音2024-03-01 11:00

js 复制代码

 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:

js 复制代码

 <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 是从项目中读取的，而不是作为外部依赖，你应该移除或注释掉。