您是 运行 Vue 的 esm-bundler 版本。建议配置你的捆绑器
You are running the esm-bundler build of Vue. It is recommended to configure your bundler
我在我的 Vue 3 项目中遇到此错误:
You are running the esm-bundler build of Vue. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle. See http://link.vuejs.org/feature-flags for more details.
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"
}
}
我阅读了提供的 link,但我没有找到解决此问题的方法。
链接文档指定了两个可配置的标志:
__VUE_OPTIONS_API__
(enable/disable Options API support, default: true)
__VUE_PROD_DEVTOOLS__
(enable/disable devtools support in production, default: false)
对于 Webpack,使用 DefinePlugin
设置这些标志:
const webpack = require('webpack')
mix.webpackConfig ({
plugins: [
new webpack.DefinePlugin({
__VUE_OPTIONS_API__: false,
__VUE_PROD_DEVTOOLS__: false,
}),
],
})
供laravel-混合使用
mix.webpackConfig(webpack => {
return {
plugins: [
new webpack.DefinePlugin({
__VUE_OPTIONS_API__: false,
__VUE_PROD_DEVTOOLS__: false,
}),
],
}
})
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;
对于 Laravel 8 添加 .vue()
.
https://laravel.com/docs/8.x/mix#vue
Mix will automatically install the Babel plugins necessary for Vue single-file component compilation support when using the vue method. No further configuration is required
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
])
.vue();
我在我的 Vue 3 项目中遇到此错误:
You are running the esm-bundler build of Vue. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle. See http://link.vuejs.org/feature-flags for more details.
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"
}
}
我阅读了提供的 link,但我没有找到解决此问题的方法。
链接文档指定了两个可配置的标志:
__VUE_OPTIONS_API__
(enable/disable Options API support, default: true)__VUE_PROD_DEVTOOLS__
(enable/disable devtools support in production, default: false)
对于 Webpack,使用 DefinePlugin
设置这些标志:
const webpack = require('webpack')
mix.webpackConfig ({
plugins: [
new webpack.DefinePlugin({
__VUE_OPTIONS_API__: false,
__VUE_PROD_DEVTOOLS__: false,
}),
],
})
供laravel-混合使用
mix.webpackConfig(webpack => {
return {
plugins: [
new webpack.DefinePlugin({
__VUE_OPTIONS_API__: false,
__VUE_PROD_DEVTOOLS__: false,
}),
],
}
})
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;
对于 Laravel 8 添加 .vue()
.
https://laravel.com/docs/8.x/mix#vue
Mix will automatically install the Babel plugins necessary for Vue single-file component compilation support when using the vue method. No further configuration is required
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
])
.vue();