如何禁止他人通过vue的devtools 查看

Posted 2023-04-13

如何禁止他人通过vue的devtools 查看
vue-cli

vue.js

k1868548 2016年12月15日提问

通过vue-cli 构建的项目 打开index后 在浏览器中应该无法使用vue的 devtool 并且应该提示Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author.
但是不知道怎么回事 我在某一次编辑后，以后的所有build 都能正常使用 devtool 查看，不知道问题出在哪。不知道这个问题是什么原因造成的。

2个回答

已采纳

自己已经解决，生产环境把 sourcemap关闭

在开发环境下是可看到，切换成生产环境就看不到啦 ！
package.json 文件
...
"scripts":
"dev": "webpack-dev-server --open --inline",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
,

...

webpack.config.js 文件中
...
if (process.env.NODE_ENV === 'production')
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin(
'process.env':
NODE_ENV: '"production"'

),
new webpack.optimize.UglifyJsPlugin(
compress:
warnings: false

)
])
... 参考技术A 这个还是可以的啊

通过npm安装vue-devtools（vue的chrome调试工具）

1. 下载chrome的扩展程序包

　　github地址：https://github.com/vuejs/vue-devtools

2. 下载完成后，解压到先关文件夹下。进入vue-devtools文件夹，开始安装项目所需依赖包

　　命令：npm install (如果有国内镜像环境，直接cnpm install就好了)

　　下载成功出现如下状态：

　　

 

3. 开始编译项目文件：

　　命令： npm run build

　　

4. 在vue-devtools文件夹下：shells>chrome>manifest.json，将配置里的persistent的值修改为true；

5. 打开chrome，进入扩展程序管理界面（chrome://extensions/），加载已解压的扩展程序。选择vue-devtools>shells>chrome。加载完成就会出现以下的Vue.js devtools扩展程序。然后重启浏览器，再打开vue项目页面就可以在chrome的Devtools（就是console的那一栏，一般都排在最后面的。）找到Vue面板了。