在Vue中引入外部CSS文件有几种方法：

1. 在index.html中直接引入外部CSS文件

在Vue项目的`index.html`文件中，可以通过``标签直接引入外部的CSS文件。将CSS文件放在`public`目录下的`assets`目录中，并在`index.html`文件中加入以下代码：

```html

```

2. 使用@import引入外部CSS文件

在Vue的CSS文件中，可以使用`@import`语句引入外部的CSS文件。将CSS文件放在`src/assets`目录中，并在Vue组件的CSS文件中加入以下代码：

```css

@import url(../assets/style.css);

```

3. 使用Vue插件style-resources-loader

`style-resources-loader`是一个Vue插件，可以在Vue组件中直接引入外部的CSS文件。首先，需要安装该插件：

```bash

npm install style-resources-loader --save-dev

```

然后，在`vue.config.js`文件中配置该插件：

```javascript

const path = require(path);

module.exports = {

chainWebpack: config => {

config.module

.rule(scss)

.oneOf(vue)

.use(style-resource)

.loader(style-resources-loader)

.options({

patterns: [

path.resolve(__dirname

./src/assets/*.scss)

// 替换为外部CSS文件的路径

]

});

}

}

```

*，在Vue组件中就可以直接引入外部的CSS文件了：

```html

```

无论使用哪种方法，都可以将外部的CSS样式应用到Vue组件中。这样可以更好地管理和复用CSS代码，减少代码冗余，提高开发效率。