我在Vue 3项目中遇到以下错误:

您正在运行Vue的esm bundler版本.建议将绑定器配置为显式地用布尔文本替换功能标志globals,以便在最终的绑定中获得适当的树抖动.更多细节见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"
  }
}

我阅读了提供的链接,但没有找到解决这个问题的方法.

推荐答案

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

  • __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,
    }),
  ],
})

Vue.js相关问答推荐

Vue路由路径匹配行为

Vue composition api: 访问