在没有console.log的情况下登录vuejs

Question

我想在 VueJS 中开发时使用控制台日志记录，但希望在生产中禁用它。

有一个模块vuejs-logger在 Vue 组件内部运行良好，在生产模式下将被禁用。但它不会在我的服务文件或库文件（在 Vue 实例之外）中工作（例如），也不会在 Vuex 中工作。

有没有人有其他建议？Vuejs 集成还是其他方式？

保持安全，TIA

编辑：澄清一下，vuejs-logger Typescript 集成才是真正的问题。它引发了太多的 TS 错误，我无法使用它。实际的 JS 日志记录似乎有效......我仍然对其他可能顺利工作的解决方案感兴趣。

Answer 1

考虑构建您自己的简单包装器，它可以在任何地方使用，假设您使用的是 Webpack，如下所示：

declare const NODE_ENV: any;

export function log(message: String, level?: 'info' | 'warn' | 'error') {

    // WHEN RUNNING WEBPACK WITH `PRODUCTION` build,
    // IT WILL REMOVE FOLLWOING CODE.

    if (NODE_ENV !== 'production') {

        if (level === 'error') {
            console.error(message);
        } else if (level === 'warn') {
            console.warn(message);
        } else {
            console.log(message);
        }
    }
}

作为一个简单的函数，您可以在代码中的任何地方直接导入它，包括组件文件或其他非组件文件。这里重要的一点是要注意NODE_ENV在生产模式下运行时 Webpack 将注入的变量的使用。类似地，存在 Rollup 和其他打包器的设置。在此处阅读更多相关信息。当 Webpack 将代码与生产模式捆绑在一起时，它会忽略if (NODE_ENV !== 'production') { /* some code */ }构造中的代码。

此外，如果您需要将其包装在插件中，以便使用this指针在每个组件实例上都可用，则：

const MyLogger = {
    install(Vue: Vue, options: any) {

        // Add an instance method
        Vue.prototype.log = log;
    }
};

Vue.install(MyLogger);

当然，如果您使用的是 TypeScript，那么您必须像这样使用模块扩充来教授 TypeScript：

import Vue from 'vue';

declare module 'vue/types/vue' {
    interface Vue {
        log(message: string, level?: 'info' | 'warn' | 'error'): void;
    }
}

上面的代码片段应该出现在您的typings文件夹中，就像使用tsconfig.json. 目录路径为：ROOT/typings/vue/index.d.ts.

在tsconfig.json文件中，typings数组应设置为：

"typeRoots": [
    "./node_modules/@types",
    "./typings"
],