Vue 3 生产模式中加载 Vue.esm-bundler.js 的详细指南

2024-03-12 19:17:36

在生产模式中加载 Vue 时使用 vue.esm-bundler.js

问题

如果你正在使用 Vue 3 和 Webpack 并使用 vue.esm-bundler.js 因为你在 DOM 中有模板，你可能会遇到在生产模式中加载 Vue 的问题。文档提到使用 process.env.NODE_ENV 来保护程序/开发分支，但没有明确说明如何通过 Webpack 实现。

解决方案

要使用 vue.esm-bundler.js 在生产模式中加载 Vue，你需要做以下两件事：

1. 使用 DefinePlugin

使用 DefinePlugin 来定义一个名为 process.env.NODE_ENV 的全局变量，并将值设置为 "production"。这将告诉 Vue 应用程序你在生产模式中运行。

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  // 其他配置
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production'),
    }),
  ],
};

2. 设置生产模式

在 webpack.config.js 中设置 mode 选项为 "production"。这将启用 Webpack 的生产模式优化。

// webpack.config.js
module.exports = {
  // 其他配置
  mode: 'production',
};

示例代码

以下是配置 Webpack 以在生产模式中使用 vue.esm-bundler.js 的完整示例代码：

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  resolve: {
    alias: {
      esmvue$: path.resolve(__dirname, 'node_modules/vue/dist/vue.esm-bundler.js'),
    },
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production'),
    }),
  ],
  mode: 'production',
};