解决Vue.js未封装扩展程序问题-CSDN博客

本文链接：https://blog.csdn.net/sinat_42338962/article/details/87086370

这篇博客探讨了在查看插件时遇到的未封装扩展程序问题。问题可能源于使用生产环境版本、压缩的Vue.js或者未启用允许访问文件网址的设置。文章提供了两种解决方案：一是检查并调整相关设置，二是考虑使用非压缩或开发版Vuejs。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

查看插件,程序展示未封装的扩展程序(如下图)

在这里插入图片描述

没显示调试工具的原因是用了生产环境的版本或是压缩的vue版本，或是没有勾选：允许访问文件网址

https://github.com/vuejs/vue-devtools
1. If the page uses a production/minified build of Vue.js, devtools inspection is disabled by default so the Vue pane won't show up.
2. To make it work for pages opened via file:// protocol, you need to check "Allow access to file URLs" 
for this extension in Chrome's extension management panel.

如果勾选了还是没有显示，说明采用了压缩版/生产版的Vuejs，则继续采用如下方案：

解决方案一：

采用script方式引入，需要在webpack.base.config.js添加externals

externals: {
    'vue': 'Vue',
},
然后在index.html引入https://cdn.bootcss.com/vue/2.5.16/vue.js，
在main.js中干掉import vue from 'vue'，

放到生产环境时，换成https://cdn.bootcss.com/vue/2.5.16/vue.min.js,

此种方式可以减少vendor打包体积

方案二：

在main.js中添加

// 若是没有开启Devtools工具，在开发环境中开启，在生产环境中关闭
if (process.env.NODE_ENV == 'development') {
    Vue.config.devtools = true;
} else {
    Vue.config.devtools = false;
}