Vue开启调试

查看Vue-cli版本

• 注意 -V是大写

Microsoft Windows [版本 10.0.22000.160]
(c) Microsoft Corporation。保留所有权利。

C:\Users\17312>vue -V
2.9.6

卸载vue-cli

npm uninstall -g vue-cli

安装3.0以上的vue

//3.0以下版本（默认安装最新版）
npm install vue-cli -g
//3.0以上版本（默认安装最新版）
npm install -g @vue/cli

//以下是安装指定版本
//3.0以下版本
npm install -g vue-cli@版本号
//3.0以上版本
npm install -g @vue/cli@版本号

开启Vue调试

如果你使用的是 Vue CLI 2，请设置并更新 config/index.js 内的 devtool property：

devtool: 'source-map',

如果你使用的是 Vue CLI 3，请设置并更新 vue.config.js 内的 devtool property：

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

Data URI scheme

格式

格式为 data:{mimeType};base64,{code}

• {mimeType}是指图片的格式类型，一般来说，JPG文件填写image/jpeg，GIF文件填写image/gif，PNG文件填写 image/png。

• {code}是指图片二进制转换成base64的字符串。

作用

• Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。
• IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。

目前，Data URI scheme支持的类型有：

data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

举例

• 如网站登录时验证码响应数据img
  
• 前面加上数据头，在浏览器中输入显示的就是一个图片