[英]How to use CDN in vue cli?
I am not familiar with packing frontend projects.我不熟悉打包前端项目。 When I was writing frontend, we just used JQuery.
当我写前端时,我们只使用了 JQuery。 So the problem is now I have a project created by vue-cli and packed by webpack.
所以问题是现在我有一个由 vue-cli 创建并由 webpack 打包的项目。
But as I don't want to load libraries from my local server but from remote CDN.但是因为我不想从本地服务器而是从远程 CDN 加载库。 How should I change the
yarn add
dependencies into CDN based form during yarn build
?在
yarn build
期间,我应该如何将yarn add
依赖项更改为基于 CDN 的形式? What is the correct way to do this kind of packing?这种包装的正确方法是什么?
I've searched a lot but cannot find a good solution, some may suggest adding all CDN in the head section.我搜索了很多但找不到好的解决方案,有些人可能会建议在 head 部分添加所有 CDN。 But that's difficult to manage.
但这很难管理。
1. update your public/index.html
adding the vue script source for the cdn (preferably in the head) 1.更新你的
public/index.html
为cdn添加vue脚本源(最好在头部)
<script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
2. create a vue.config.js
file in the project root with the following configuration. 2.在项目根目录下创建一个
vue.config.js
文件,配置如下。 (if you already have the file, add configureWebpack
block to it) (如果您已经拥有该文件,请将
configureWebpack
块添加到其中)
module.exports = {
configureWebpack: {
externals: {
Vue: "vue"
}
}
};
this will flag the Vue dependency as a global, and not add it into the vendor bundle.这会将 Vue 依赖项标记为全局,而不是将其添加到供应商包中。 You can do the same with other dependencies like
element-ui
, vuetify
, vuex
, etc...您可以对其他依赖项执行相同的操作,例如
element-ui
、 vuetify
、 vuex
等...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.