vue项目开发过程中的一些问题-- 使用 `@vue/cli 5.0.8` , **VUE\_PROD\_HYDRATION\_MISMATCH\_DETAIL

341 阅读1分钟

问题:

使用 @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….

image.png

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}`]: ""
                },
            },
        },
    },
});

参考链接