vue.config.js配置cdn加速
时间: 2023-10-28 11:18:42 浏览: 96
在 Vue.js 项目中使用 CDN 加速可以提高网站的访问速度,可以通过以下步骤来配置:
1. 在 `public/index.html` 文件中引入 CDN 资源:
```html
<!DOCTYPE html>
<html>
<head>
<!-- 省略其他内容 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router"></script>
<script src="https://cdn.jsdelivr.net/npm/vuex"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
```
2. 在 `vue.config.js` 文件中配置:
```js
module.exports = {
// 省略其他配置
configureWebpack: {
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex'
}
}
}
```
上述代码中,`externals` 配置项用于告诉 webpack 不要打包这些模块,而是使用全局变量中的这些模块。这里我们将 `vue`、`vue-router` 和 `vuex` 模块都配置成了全局变量。
注意:如果你的 CDN 资源版本与项目依赖的版本不一致,可能会导致一些问题,建议保持一致。
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231044930.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![docx](https://img-home.csdnimg.cn/images/20241231044901.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)