-
在index.html 中通过script 标签引入cdn链接
<html lang="zh"> <head> <title>vue-demo</title> <script src="https://cdn.jsdelivr.net/gh/zh-lx/pinyin-pro@latest/dist/pinyin-pro.js">这是引入的cdn链接</script> </head> <body> <div id="app"></div> </body> </html>
-
在vue.config.js中配置插件， 缩小打包体积
通过 webpack 的 externals 节点，来配置并加载内部的 CDN 资源。但凡申明在 externals 中的第三方依赖包，都不会被打包。
configureWebpack: config => { Object.assign(config, { externals: { pinyinPro: 'pinyin-pro' } }) }
-
在 .eslintrc.js 中配置globals (如果应用了eslint)
module.exports = { ... globals: { pinyinPro: 'readonly' // readonly = true } }
-
index.vue 中应用
// script 中引入 <script> const { pinyin } = pinyinPro const test = pinyin('阳光明媚') console.log(test) // yang guang ming mei </script>
以上。
发表回复