来自 Web前端 2020-05-07 05:42 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

解决游览器安装Vue.js devtools插件无效的问题

时间: 2019-08-30阅读: 322标签: 插件

时间: 2017-12-27阅读: 27992标签: vue

一:打开自己写的一个vue.js网页,发现图标并没有亮起来,还是灰色

使用vue开发过一段时间了,采用 Vue-cli脚手架中出现一些页面空白问题的解决方法总汇

解决方案:

1.npm run build打包页面空白

1、我们先看看Vue.js devtools是否生效,打开Bilibili(,B站是用的vue),如果发现这个图标变绿了,说明Vue.js devtools是能用的。否则建议卸载重装

我们会发现页面head中引用的js和css文件是出现了路径错误,这里修改如下:

2、先再拓展程序中找到Vue.js devtools , 点击详情信息 , 找到允许访问文件网址, 打开开关 ,就可以了

解决位置:config/index.js文件:把assetsPublicPath: '/'改为assetsPublicPath: './'

二:打开自己写的一个vue.js网页,游览器上图标有了 ,但是控制台不显示

build: { assetsPublicPath: './',}

问题原因:没显示调试工具的原因是用了生产环境的版本或是压缩的vue版本,或是没有勾选

  1. iOS的Safari下无法打开网页

解决方案:

webpack-dev-server = 2.8.0 的版本在 iOS Safari 下无法打开网页,效果为白屏。

在项目入口文件(main.js)引入

控制台报错:Can't find variable: SockJS应该是 Safari 的 BUG,比如下面的代码就会抛出

Vue.config.devtools = true;
Error eval("const a = function () {}; function b() { a(); }; b();")

解决方法1.使用老版本:

yarn add webpack-dev-server@~2.7.0 -D

2.其它方法

yarn add babel-plugin-transform-es2015-block-scoping -D

修改 webpack 相关配置

{ test: /.js$/, loader: 'babel-loader', include: [ ..., /node_modules/webpack-dev-server/ ]}

3.升级vue2+部分手机访问出现页面空白

网上澳门金莎娱乐,npm run dev后可能出现无法加载到路由模板的信息。

解决位置:config/index.js文件:把devtool: '#eval-source-map' 改为devtool:'inline-source-map'

dev: { devtool:'inline-source-map',}

4.升级vue2+IP访问页面空白

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:解决游览器安装Vue.js devtools插件无效的问题

关键词: