vue cli專案使用CDN資源

2021-08-29 09:32:58 字數 619 閱讀 4107

眾所周知web頁面使用cdn的優勢,常規html檔案直接用script標籤引入即可。近期的vue+webpack專案也需要用的cdn,客戶有自己的外掛程式api,需要cdn引入。

vue+webpack,常規外掛程式都已經安裝了依賴包,因此可以通過require的方式按需引入。那麼cdn檔案也想用require的方式引入的話,就需要用到webpack的external模組。external的表面意思就很清楚的,表面的,外部的。

這裡我用我引入的客戶方api為例子。

在index.html頁面中引入cdn檔案:

我想在a.vue檔案中require這個api,那我就需要將他在webpack中特殊處理。修改webpack.base.conf.js,在他的

module.exports中新增乙個屬性
module.exports = 

}

這樣就可以在vue檔案中require這個模組了。但是修改了webpack配置檔案,需要npm start重跑一下本地服務就可以了。

等專案跑起來了可以正常使用了,記得看一下external的具體用法。

→→→→→→external傳送門

vue cli專案使用scss

介紹乙個vue專案給大家學習,閱讀別人的專案可以快速提高自己哦,移動端vue完整專案 安裝node sass sass loader style loader,進入webpack.base.config.js配置scss。所以增加如下 當然,如果需要在vue檔案style標籤使用scss的話,需要宣...

使用vue cli構建專案。

所以操作皆在命令列下完成 npm install golbal vue clivue init webpack workname workname為專案名 tables areproject name 專案名 不可大寫 project description 專案描述 author 作者vue bu...

使用 vue cli 搭建專案

vue cli 是乙個官方發布 vue.js 專案腳手架,使用 vue cli 可以快速建立 vue 專案,github位址是 vue cli 3.x 已經發布,如果使用 3.x 構建專案,請參考 vue 爬坑之路 十二 vue cli 3.x 搭建專案 一 安裝 node.js 只是這樣安裝的 n...