前言
没啥好说的,插件叫eruda
c
提示:以下是本篇文章正文内容,下面案例可供参考
一、原生用法
这是我推荐的eruda
html
<script src="//cdn.bootcdn.net/ajax/libs/eruda/2.3.3/eruda.js"></script>
<script>
eruda.init();
</script>
还有另外一个叫VConsole
html
<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
<script>
// 初始化 引入的调试组件
var vConsole = new VConsole();
console.log('控制台打印信息 最新');
</script>
二、vue用法
1.引入库
bash
npm install eruda@^3.0.0 --save
2.编写环境配置
本地为true,服务器端为false。用来控制显示隐藏
- .env.development
js
VUE_APP_NEED_ERUDA = true
- .env.production
js
VUE_APP_NEED_ERUDA = false
3 tools.js
js
import eruda from 'eruda'
// eruda 初始化
export const initEruda = () => {
const NEED_ERUDA = process.env.VUE_APP_NEED_ERUDA
if (NEED_ERUDA === 'true') {
eruda.init()
}
}
4. main.js
js
// 引入移动端调试工具
import { initEruda } from '@/utils/tools'
initEruda()
总结
在打包后由于环境变量是false,所以不会执行init操作。在服务器端就不会显示。