初识 Webpack (九) 使用打印和url解析（vconsole、jsUri）

目录

vconsole-webpack-plugin

➊ 参考文章 ➋ 步骤 ➌ 效果图

jsUri

---

• （一）vconsole-webpack-plugin

• ➊ 参考文章

1. npm 官方地址
2. Github 使用vconsole项目地址（ 效果图可放大）
3. 移动端的打印神器 VConsole

• ➋ 步骤

<!--  ➀ 新建项目 -->
vue init webpack my-vconsole



<!--  ➁ 添加依赖 -->
npm config set registry https://registry.npm.taobao.org
npm install vconsole-webpack-plugin --save-dev



<!--  ➂ 引入配置./my-vconsole/build/webpack.base.conf.js -->
// 引入插件
var vConsolePlugin = require('vconsole-webpack-plugin'); 

module.exports = {
    ...

    plugins: [
        new vConsolePlugin({
            filter: [],  // 需要过滤的入口文件
            enable: true // 发布代码前记得改回 false
        }),
        ...
    ]
    ...
}




<!--  ➃ 启动 -->
npm run dev

• ➌ 效果图

      

---

• （二）jsUri

1. 官网：https://www.npmjs.com/package/jsuri
2. 效果图：（可放大）
3. 示例代码

var URI = require('urijs');
var uri = URI('http://user:[email protected]:81/index.html?q=books#fragment');
console.log(uri);

document.write("<li>protocol->" + uri.protocol() + "</li>")
document.write("<li>host->" + uri.host() + "</li>")
document.write("<li>port->" + uri.port() + "</li>")
document.write("<li>path->" + uri.path() + "</li>")
document.write("<li>query->" + uri.query() + "</li>")

---