在Vue.js中如何像Angular那样单独拆分存放html、css独立文件？

Vue 官方原生支持类似 Angular 的组件资源拆分方式，无需额外配置即可实现将 html 模板、css 样式拆分到独立文件引入使用，具体操作如下：

1. 拆分 HTML 模板到独立文件 #

将组件对应的模板内容单独存为 .html 文件，在 .vue 组件的 <template> 标签上通过 src 属性引入即可，示例如下：

<!-- 你的组件文件，比如 HelloWorld.vue -->
<template src="./HelloWorld.html"></template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: '欢迎使用 Vue'
    }
  }
}
</script>

对应的 HelloWorld.html 直接编写模板内容即可，不需要额外嵌套外层标签：

<div class="hello-card">
  <h1>{{ msg }}</h1>
  <p>这是从独立html文件加载的模板内容</p>
</div>

2. 拆分 CSS 样式到独立文件 #

样式的拆分方式和模板完全一致，在 <style> 标签上通过 src 属性引入独立的样式文件即可，原有的 scoped、lang 等属性照样生效：

<!-- HelloWorld.vue 完整示例 -->
<template src="./HelloWorld.html"></template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: '欢迎使用 Vue'
    }
  }
}
</script>

<!-- 引入独立css文件，scoped属性表示样式仅对当前组件生效 -->
<style scoped src="./HelloWorld.css"></style>

如果使用 CSS 预处理器，只需要同步修改 lang 属性和引入文件的后缀即可，比如使用 scss 的写法：

<style scoped lang="scss" src="./HelloWorld.scss"></style>

补充说明 #

• 上述拆分能力是 Vue 单文件组件的原生特性，使用官方脚手架创建的 vite、webpack 项目均默认支持，不需要修改任何构建配置。
• 如果是全局通用样式，也可以直接在项目入口文件（通常为 main.js/main.ts）中通过 import './assets/global.css' 的方式全局引入。

内容的提问来源于stack exchange，提问作者Naveed Akram