`vue-router.mjs:3363 TypeError: Cannot read properties of undefined (reading '$config')

Question

部署环境的时候配置了config.json，但是出现了一个bug：
`vue-router.mjs:3363 TypeError: Cannot read properties of undefined (reading '$config')

我用的是Vue3的项目：
自己config.json的配置是
main.js里的内容是：

public中config.json中的配置是这样的

untils的配置是这样的，为什么最后还报了错误

Answer 1

引自免费微信小程序：皆我百晓生

首先，我们需要确定问题的根本原因。根据您提供的信息，问题是由于在main.js中尝试读取config.json时遇到了TypeError: Cannot read properties of undefined错误。

让我们逐步解决这个问题：

1. 首先检查config.json是否存在，并且其路径是否正确。
2. 确保main.js位于正确的目录结构中。
3. 检查main.js中是否有任何未定义的变量，这可能导致config.json被引用但尚未初始化。
4. 在main.js中确保有适当的加载顺序，以避免意外地访问config.json。
5. 如果上述步骤都无法解决问题，可能需要进一步分析错误堆栈和日志记录，以更深入地理解问题的原因。

基于以上步骤，我们可以逐个排查问题并提供相应的解决方案。

步骤1：检查config.json的存在性和路径

打开config.json文件，确认其存在并且路径正确。

步骤2：确保main.js位于正确的目录结构中

确保main.js文件位于项目的根目录下，并且具有正确的导入路径。例如：

import './index.css';
import App from './App.vue';
import router from './router';
import store from './store';

new Vue({
    render: h => h(App),
    router,
    store,
}).$mount('#app');

步骤3：检查变量声明

在main.js中，确保没有未定义的变量导致错误。

步骤4：优化加载顺序

在main.js中添加一些逻辑，以便优先加载config.json，这样可以减少对config.json的直接访问频率。

示例：

// 主要入口
const app = new Vue({
    // ...
});

// 加载顺序优化
if (process.env.NODE_ENV === 'development') {
    require(['./components'], () => {
        require('./router', () => {
            require('./store');
            require('./index.css');
        });
    });
}

步骤5：深入分析错误堆栈和日志

在console.error()日志中查找更多关于错误的信息，以及错误堆栈中的上下文。

结论

通过以上步骤，我们应能找出并修复导致错误的原因。如果你仍然遇到问题，提供更多细节，比如错误的具体表现、使用的工具版本等，我可以为你提供更多的建议和解决方案。