当前位置：首页 > 行业动态 > 正文

如何去除 Vue 项目中的 CDN 依赖？

admin
行业动态
2025-01-18
3131

要在 HTML 文件中去掉 Vue.js 的 CDN，可以删除包含 ` 标签的行。，，` html，，，，，“

在Vue项目中，去掉CDN链接通常意味着使用本地文件或通过其他方式引入Vue及其相关依赖，以下是关于如何在Vue项目中去掉CDN链接的详细回答：

如何去除 Vue 项目中的 CDN 依赖？第1张

一、使用npm安装Vue

1、初始化项目：

如果还没有创建Vue项目，可以使用Vue CLI来初始化一个新项目，打开终端并运行以下命令：

 vue create my-project
   cd my-project

2、安装Vue：

在项目根目录下运行以下命令来安装Vue：

 npm install vue

3、引入Vue：

在项目的入口文件（如main.js或main.ts）中引入Vue：

 import Vue from 'vue';

二、配置Webpack（如果需要）

如果你在使用Webpack进行构建，并且想要排除某些依赖项不被打包到最终的JS文件中，可以在vue.config.js中进行配置：

module.exports = {
  // 其他配置...
  chainWebpack: config => {
    config.when(process.env.NODE_ENV === 'production', config => {
      config.externals({
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        // 其他需要排除的依赖...
      });
    });
  }
};

三、使用ES Modules直接引入Vue

如果你不使用构建工具，或者想要直接在HTML文件中引入Vue，可以使用ES Modules的方式：

1、修改HTML文件：

在HTML文件的<head>标签内添加以下代码来引入Vue的ES Modules版本：

 <script type="module" src="https://unpkg.com/vue@3.0.0/dist/vue.esm-browser.js"></script>

2、编写Vue实例：

在HTML文件的<body>标签内添加以下代码来创建一个Vue实例：

 <div id="app">{{ message }}</div>
   <script type="module">
     import { createApp } from 'vue';
     const app = createApp({
       data() {
         return {
           message: 'Hello, Vue 3!'
         }
       }
     });
     app.mount('#app');
   </script>