初識 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>")

---