vue怎么引用外部js和css

在Vue中引用外部JS和CSS的方法有多种，包括通过在index.html文件中直接引入、在Vue组件中使用<script>和<style>标签、通过webpack配置引入等。其中，在index.html文件中引入外部资源是最常见且简单的方法，因为它可以确保在应用加载之前就加载好所需的外部资源。

在index.html文件中引入外部资源的详细描述：

在public目录下的index.html文件中，可以直接使用<script>和<link>标签引入外部的JavaScript和CSS文件。这种方法适合引入一些全局使用的库，比如jQuery、Bootstrap等。通过这种方式引入的资源会在所有Vue组件加载之前就已经准备好，因此无需在每个组件中重复引入。

一、在index.html中引入外部JS和CSS

1. 引入外部CSS

在Vue项目的public目录下找到index.html文件，然后在<head>标签内添加<link>标签来引入外部CSS文件。例如：

<!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>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
  <div id="app"></div>
  <script src="/path/to/your/app.js"></script>
</body>
</html>

2. 引入外部JS

同样地，可以在<body>标签内的末尾添加<script>标签来引入外部JavaScript文件。例如：

<!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>
</head>
<body>
  <div id="app"></div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <script src="/path/to/your/app.js"></script>
</body>
</html>

二、在Vue组件中引入外部JS和CSS

1. 在<template>中引入CSS

在单文件组件（.vue文件）中，可以使用<style>标签引入外部CSS。例如：

<template>

  <div class="example">
    <p>Hello, World!</p>
  </div>
</template>
<script>
export default {
  name: 'ExampleComponent'
}
</script>
<style scoped>
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');
.example {
  font-size: 20px;
}
</style>

2. 在<script>中引入JS

同样地，可以在组件的<script>部分引入外部JavaScript文件。例如：

<template>

  <div>
    <button @click="showAlert">Click Me</button>
  </div>
</template>
<script>
import $ from 'jquery';
export default {
  name: 'ExampleComponent',
  methods: {
    showAlert() {
      $('button').click(function() {
        alert('Button clicked!');
      });
    }
  },
  mounted() {
    this.showAlert();
  }
}
</script>
<style scoped>
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');
</style>

三、通过webpack配置引入外部JS和CSS

1. 修改vue.config.js文件

如果是通过Vue CLI创建的项目，可以在vue.config.js文件中进行配置。例如：

module.exports = {

  configureWebpack: {
    externals: {
      'jquery': 'jQuery',
      'bootstrap': 'Bootstrap'
    }
  }
}

2. 在组件中引入外部JS和CSS

<template>

  <div>
    <button @click="showAlert">Click Me</button>
  </div>
</template>
<script>
export default {
  name: 'ExampleComponent',
  methods: {
    showAlert() {
      jQuery('button').click(function() {
        alert('Button clicked!');
      });
    }
  },
  mounted() {
    this.showAlert();
  }
}
</script>
<style scoped>
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');
</style>

四、通过插件引入外部JS和CSS

1. 使用插件引入CSS

可以使用一些Vue插件来简化引入外部资源的过程。例如，使用vue-head插件来管理HTML的<head>部分：

// 安装vue-head插件

npm install vue-head
// 在main.js中使用插件
import Vue from 'vue'
import App from './App.vue'
import VueHead from 'vue-head'
Vue.use(VueHead)
new Vue({
  render: h => h(App),
}).$mount('#app')

2. 使用插件引入JS

同样地，可以使用vue-script2插件来动态加载外部JavaScript文件：

// 安装vue-script2插件

npm install vue-script2
// 在main.js中使用插件
import Vue from 'vue'
import App from './App.vue'
import VueScript2 from 'vue-script2'
Vue.use(VueScript2)
new Vue({
  render: h => h(App),
}).$mount('#app')

在组件中动态加载外部JS：

<template>

  <div>
    <button @click="loadScript">Load Script</button>
  </div>
</template>
<script>
export default {
  name: 'ExampleComponent',
  methods: {
    loadScript() {
      this.$script('https://code.jquery.com/jquery-3.6.0.min.js')
        .then(() => {
          console.log('Script loaded!');
        })
        .catch(() => {
          console.error('Script loading failed.');
        });
    }
  }
}
</script>

五、在Vue CLI项目中使用CDN

1. 修改vue.config.js文件

在Vue CLI项目中，可以通过修改vue.config.js文件来使用CDN。例如：

module.exports = {

  chainWebpack: config => {
    config.externals({
      'jquery': 'jQuery',
      'bootstrap': 'Bootstrap'
    })
  },
  configureWebpack: {
    plugins: [
      new HtmlWebpackPlugin({
        template: 'public/index.html',
        inject: true,
        cdn: {
          js: [
            'https://code.jquery.com/jquery-3.6.0.min.js',
            'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js'
          ],
          css: [
            'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'
          ]
        }
      })
    ]
  }
}

2. 修改index.html文件

在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>
  <!-- 引入CDN的CSS -->
  <% for (var css of htmlWebpackPlugin.options.cdn.css) { %>
    <link rel="stylesheet" href="<%= css %>">
  <% } %>
</head>
<body>
  <div id="app"></div>
  <!-- 引入CDN的JS -->
  <% for (var js of htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= js %>"></script>
  <% } %>
  <script src="/path/to/your/app.js"></script>
</body>
</html>

通过以上方法，可以在Vue项目中灵活地引入外部的JavaScript和CSS文件，满足不同的使用场景需求。选择适合自己项目的引入方式，可以提高开发效率和代码的可维护性。

相关问答FAQs：

1. 如何在Vue中引用外部的JavaScript文件？
在Vue中引用外部JavaScript文件可以通过以下步骤实现：

• 首先，在Vue的组件中使用<script>标签引入外部JavaScript文件的URL。
• 其次，在Vue组件的mounted生命周期钩子函数中，使用document.createElement('script')创建一个新的<script>元素。
• 然后，将该元素的src属性设置为外部JavaScript文件的URL。
• 最后，使用document.head.appendChild(scriptElement)将该元素添加到文档头部，以便加载外部JavaScript文件。

2. Vue中如何引用外部CSS文件？
在Vue中引用外部CSS文件可以按照以下步骤进行：

• 首先，将外部CSS文件放置在Vue项目的public文件夹中。
• 其次，在Vue组件的<style>标签中使用@import规则导入外部CSS文件。
• 然后，使用相对路径指定外部CSS文件的位置，例如@import '../public/style.css'。
• 最后，在Vue组件的模板中使用导入的CSS样式。

3. 如何在Vue中同时引用外部JavaScript和CSS文件？
在Vue中同时引用外部JavaScript和CSS文件可以按照以下步骤进行：

• 首先，按照上述步骤引用外部JavaScript文件。
• 其次，按照上述步骤引用外部CSS文件。
• 然后，在Vue组件的模板中使用引入的CSS样式。
• 最后，在Vue组件的mounted生命周期钩子函数中，使用document.createElement('link')创建一个新的<link>元素。
• 使用rel属性设置为stylesheet，href属性设置为外部CSS文件的URL。
• 使用document.head.appendChild(linkElement)将该元素添加到文档头部，以便加载外部CSS文件。

这样，你就可以在Vue中引用外部JavaScript和CSS文件了。