您正在运行 Vue 的 esm-bundler 构建。建议配置您的捆绑器

Posted 2023-02-22

【中文标题】您正在运行 Vue 的 esm-bundler 构建。建议配置您的捆绑器

【英文标题】：You are running the esm-bundler build of Vue. It is recommended to configure your bundler

【发布时间】：2021-05-17 05:59:29

【问题描述】：

我的 Vue 3 项目出现此错误：

您正在运行 Vue 的 esm-bundler 构建。建议将您的捆绑器配置为用布尔文字显式替换功能标志全局变量，以在最终捆绑包中获得正确的树抖动。详情请见http://link.vuejs.org/feature-flags。

webpack.mix.js

const mix = require ('laravel-mix');
const path = require ('path');

mix.webpackConfig (
    output: 
        chunkFilename: 'js/chunks/[name].[chunkhash].js'
    ,
    module: 
        rules: [
            
                test: /node_modules(?:\/|\\).+\.js$/,
                loader: 'babel-loader',
                options: 
                    presets: [['@babel/preset-env', targets: 'last 2 versions, ie >= 10']],
                    plugins: ['@babel/plugin-transform-destructuring', '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-transform-template-literals'],
                    babelrc: false
                
            ,
            
                enforce: 'pre',
                test: /\.(js|vue)$/,
                loader: 'eslint-loader',
                exclude: /node_modules/
            
        ]
    ,
    resolve: 
      alias: 
        vue: "vue/dist/vue.esm-bundler.js"
      ,
    ,
    optimization: 
        providedExports: false,
        sideEffects: false,
        usedExports: false
    
);

mix.js ("resources/js/entry-point.js", "public/js").vue()
.postCss ("resources/css/app.css", "public/css", [
    require ("tailwindcss"),
]);

mix.extract (['vue']);

if (mix.inProduction ()) 
    mix
    .version ();

在这种情况下，我是否设置mix.webpackConfig都没有关系。

这是package.json：

  "private": true,
  "scripts": 
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
  ,
  "devDependencies": 
    "@vue/compiler-sfc": "^3.0.5",
    "autoprefixer": "^10.2.4",
    "axios": "^0.21",
    "cross-env": "^5.1",
    "css-loader": "^5.0.2",
    "eslint-plugin-vue": "^7.5.0",
    "file-loader": "^6.2.0",
    "laravel-mix": "^6.0.6",
    "mini-css-extract-plugin": "^1.3.6",
    "postcss": "^8.2.6",
    "resolve-url-loader": "^3.1.2",
    "tailwindcss": "^2.0.3",
    "url-loader": "^4.0.0",
    "vue-loader": "^16.1.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.19.0",
    "eslint-config-google": "^0.14.0",
    "eslint-loader": "^4.0.2"
  ,
  "dependencies": 
    "vue": "^3.0.5",
    "vue-router": "4.0.3"
  

我阅读了提供的链接，但没有找到解决此问题的方法。

【参考方案1】：

链接的文档指定了两个可配置的标志：

__VUE_OPTIONS_API__（启用/禁用选项 API 支持，默认：true） __VUE_PROD_DEVTOOLS__（在生产环境中启用/禁用 devtools 支持，默认值：false）

对于 Webpack，使用 DefinePlugin 设置这些标志：

const webpack = require('webpack')

mix.webpackConfig (
  plugins: [
    new webpack.DefinePlugin(
      __VUE_OPTIONS_API__: false,
      __VUE_PROD_DEVTOOLS__: false,
    ),
  ],
)

【参考方案2】：

供 laravel-mix 使用

mix.webpackConfig(webpack => 
    return 
        plugins: [
            new webpack.DefinePlugin(
                __VUE_OPTIONS_API__: false,
                __VUE_PROD_DEVTOOLS__: false,
            ),
        ],
    
)

【参考方案3】：

webpack.config.js

const Webpack = require('webpack');

module.exports = (env, options) => 
    return 
        ...,
        module : 
            ...,
        ,
        plugins : [
            ...,
            new Webpack.DefinePlugin( __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: true ), // to remove warn in browser console: runtime-core.esm-bundler.js:3607 Feature flags __VUE_OPTIONS_API__, __VUE_PROD_DEVTOOLS__ are not explicitly defined...
            ...,
        ],
        ...,
    ;
;

或者替代方法是在应用入口文件中添加 2 行：

globalThis.__VUE_OPTIONS_API__ = true;
globalThis.__VUE_PROD_DEVTOOLS__ = false;

【参考方案4】：

对于 Laravel 8 添加.vue()。

https://laravel.com/docs/8.x/mix#vue

Mix 在使用 vue 方法时会自动安装 Vue 单文件组件编译支持所需的 Babel 插件。无需进一步配置

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ])
    .vue();