1、直接在HTML文件中引入CDN链接
适用场景：适用于小型项目或测试目的，操作简单直接。
操作步骤：打开HTML文件，在<head>标签内或<body>标签内添加如下代码：
<!-引入Vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
这样做的好处是，可以快速引入Vue框架，无需下载和安装任何文件，CDN通常具有较高的可用性和稳定性，可以提高网站的加载速度。
2、在Vue CLI项目中配置外部资源
适用场景：适用于复杂项目，需要对项目进行更细致的配置和管理。
操作步骤：
打开项目的vue.config.js文件（如果不存在则创建）。
在文件中添加如下配置：
module.exports = {
chainWebpack: config => {
config.externals = {
vue: 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios'
}
}
} 在public/index.html文件中引入CDN链接：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue App</title>
<!-引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-引入Vue Router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-引入Vuex -->
<script src="https://unpkg.com/vuex@3"></script>
<!-引入Axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html> 在Vue组件中使用时，需要通过全局变量的方式访问这些库，
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app') 3、通过插件或工具进行引入
适用场景：适合使用现代构建工具的项目，如Webpack、Vite等。
以Webpack为例：
安装相关依赖：npm install vue vue-router vuex axios --save。
在webpack.config.js文件中配置：
const webpack = require('webpack');
module.exports = {
entry: './src/main.js',
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
plugins: [
new webpack.ProvidePlugin({
vue: 'vue',
'window.vue': 'vue',
'window.Vue': 'vue'
})
],
externals: {
vue: 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios'
}
} 在public/index.html文件中引入CDN链接（同上）。
就是在Vue项目中导入CDN的几种常见方法及其详细步骤，每种方法都有其适用的场景和优缺点，开发者可以根据项目的具体需求选择合适的方法。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/1660070.html
本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。
发表回复