1. HTML 文件
默认情况下，Vue CLI 使用 public/index.html 文件作为项目的入口 HTML 文件。在这个文件中，你可以定义应用程序的整体结构、引入的样式和脚本等。Vue CLI 会在构建时自动注入生成的 JavaScript 和 CSS 文件。
你可以在 public/index.html 文件中使用占位符来指定注入的位置，例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
在上面的例子中，<%= htmlWebpackPlugin.options.title %> 是一个用于动态设置标题的占位符。
2. 静态资源
静态资源（如图片、字体等）通常存放在 public 目录中，这些资源会被原样复制到构建目录（默认为 dist 目录）下。例如，你可以在 public 目录中创建一个 images 文件夹，并在 HTML 文件中引用：
<img src="<%= BASE_URL %>images/logo.png" alt="Logo">
其中，<%= BASE_URL %> 是一个 Vue CLI 自动生成的占位符，用于动态设置项目的基础路径。
如果你希望在代码中动态引用这些静态资源，可以使用 require 或 import 语句，Webpack 会处理这些导入并将其包含在构建输出中：
// 在 Vue 组件中
<template>
<div>
<img :src="require('@/assets/logo.png')" alt="Logo">
</div>
</template>
// 在普通 JavaScript 文件中
import logo from '@/assets/logo.png';
在上面的例子中，@ 表示项目根目录（在 webpack 中配置的别名）。
总体来说，Vue CLI 通过 webpack 提供了强大的构建能力，使得 HTML 和静态资源的管理变得非常灵活。你可以根据项目需求在 public 目录中管理静态资源，并在代码中引用它们。
转载请注明出处：http://www.zyzy.cn/article/detail/4829/Vue