问题:
使用 @vue/cli 5.0.8
(目前最新版本)创建的脚手架项目运行之后,会在控制台打印下面的警告信息:
报错信息如下:
main.js:10 Feature flag VUE_PROD_HYDRATION_MISMATCH_DETAILS is not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle.
For more details, see link.vuejs.org/feature-fla….
vue.config.js 文件
const {
defineConfig
} = require("@vue/cli-service");
const {
DefinePlugin
} = require("webpack");
const AutoImport = require("unplugin-auto-import/webpack");
const Components = require("unplugin-vue-components/webpack");
const {
ElementPlusResolver
} = require("unplugin-vue-components/resolvers");
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: (config) => {
config.resolve = {
extensions: [".js", ".json", ".vue"],
alias: {
"@": require("path").resolve(__dirname, "./src"),
"@u": require("path").resolve(__dirname, "./src/utils"),
"@c": require("path").resolve(__dirname, "./src/components"),
"@a": require("path").resolve(__dirname, "./src/api"),
},
};
return {
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
new DefinePlugin({
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false, // 关键代码....
}),
],
};
},
css: {
loaderOptions: {
scss: {
additionalData: `@import "./src/styles/main.scss";`,
},
},
},
devServer: {
proxy: {
[process.env.VUE_APP_API]: {
target: process.env.VUE_API_DEV_TARGET,
changeOrigin: true,
pathRewrite: {
[`^${process.env.VUE_APP_API}`]: ""
},
},
},
},
});