vue项目中尝试CDN引入,碰到问题

vue项目中使用CDN引入vue、vuex、vue-router、element-ui,
配置完vue.config.js:
问题:
main.js中import引入的,
1、是否要删除,网上很多都说是要删除。
2、import Vue from 'vue'删除后,main.js 里很多非CDN引入的部分如何处理,比如main.js 含有 import VueClipboard from 'vue-clipboard2' ;Vue.use(VueClipboard);删除 import Vue from 'vue';Vue.use(VueClipboard)就会报错;还有一些对Vue属性的设置,比如设置Vue.prototype.$api ;
同样 import VueRouter from 'vue-router' 删除后,路由如何赋值

我个人认为,如果是通过CDN引入,写法应该不会有太大变化。
比如你要使用 VueClipboard,写法应当还为这个Vue.use(VueClipboard)。如果你的报错,提示Vue找不到等相关提示。那要看看你CDN引入的是否正确,引入的位置是不是在页面最上方。

该回答引用GPT:
在使用CDN引入vue、vuex、vue-router、element-ui时,需要在vue.config.js中配置externals,然后在main.js中删除import Vue from 'vue',以及其他非CDN引入的部分,比如import VueClipboard from 'vue-clipboard2',Vue.use(VueClipboard),Vue.prototype.$api等,这些都可以在index.html中直接引入,然后在main.js中使用即可,比如:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuex/dist/vuex.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-clipboard2/dist/vue-clipboard2.js"></script>

// main.js
Vue.use(VueClipboard)
Vue.prototype.$api = api

如还有疑问,可留言帮助解决。

该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下:

如果你在项目中使用了CDN引入vue、vuex、vue-router、element-ui,那么在main.js中的import引入可以删除,因为这些库已经在CDN中被加载了,不需要再通过import引入。

但是如果你的项目中还有其他非CDN引入的部分,比如import VueClipboard from 'vue-clipboard2';Vue.use(VueClipboard),那么你需要保留这部分代码,因为这些库不是通过CDN引入的,而是通过import引入的。

关于对Vue属性的设置,比如设置Vue.prototype.$api,这些代码也需要保留。因为这些设置是针对Vue实例的,不会受到CDN引入的影响。

对于路由的赋值,如果你使用了CDN引入vue-router,那么你可以在main.js中通过Vue.use(VueRouter)来注册路由,类似于VueClipboard的用法。

以下是一个示例代码:

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'

// CDN引入vue-router
Vue.use(VueRouter)

// 导入路由配置
import routes from './routes'

// 创建路由实例
const router = new VueRouter({
  routes
})

// 将路由实例挂载到Vue实例上
new Vue({
  router
}).$mount('#app')

需要注意的是,如果你已经在Vue实例中使用了router,那么你需要保留对VueRouter的import和Vue.use(VueRouter)注册。


如果以上回答对您有所帮助,点击一下采纳该答案~谢谢

您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632