随着前端技术的不断发展，越来越多的前端框架被引入到我们的日常开发中。在这些框架中，vue.js 作为一个快速轻量级的前端框架越来越受到开发者的青睐。在 vue.js 的开发过程中，我们通常会使用 vue cli 这个官方的脚手架来创建项目。然而，在某些情况下，当我们使用 vue cli 创建完项目后，发现并没有生成静态文件夹，可能会让新手开发者感到困惑。本文将会带你了解通常遇到的这种问题的解决方式。

首先来了解一下为什么会出现这种情况。当我们通过 Vue CLI 创建一个新项目时，Vue CLI 会将一些默认配置和结构初始化为项目的基础文件。这些文件都包含在项目的根目录下的一个名为 src 的文件夹中。默认情况下，Vue CLI 并不会为我们生成包含静态文件的文件夹。所以当我们试图通过访问静态文件夹资源，如 CSS 或 JavaScript 文件，通常会看到一个 404 错误页面。

那么，如何在 Vue CLI 创建的项目中添加静态文件夹呢？下面介绍两种不同的方法：

方式一：手动创建静态文件夹

首先，我们需要在项目的根目录下手动创建一个名为 static 的文件夹。这个文件夹将用来存储静态资源文件。可以在 static 文件夹下创建一些子文件夹，用于存放不同类型的静态资源。例如，我们可以创建一个 CSS 文件夹并将所有的 CSS 文件存放在其中；也可以创建一个 images 文件夹来存储所有图片资源。

要让 Vue CLI 知道我们已经创建了静态文件夹，我们需要在根目录下找到一个名为 vue.config.js 的文件，并将其打开。如果你没有该文件，则需要手动创建它。在 vue.config.js 文件中添加以下代码：

module.exports = {
  chainWebpack: config => {
    config
      .plugin('copy')
      .tap(args => {
        args[0][0].from = 'static'
        return args
      })
  }
}

这段代码告诉 Vue CLI 在构建项目时将 static 文件夹中的所有内容复制到项目的根目录下。现在，你就可以将你的静态资源文件放入 static 文件夹中，并在 Vue.js 项目中正常使用它们了。

方式二：使用 public 文件夹

Vue CLI 也提供了另一种将静态文件添加到项目中的方式。这种方式是将静态文件存放在 public 文件夹中。public 文件夹不同于 src 文件夹，不会被编译和打包到最终的项目中。相反，它们将被复制到最终构建的项目根目录下。

要使用这种方式，我们只需要将静态资源文件放入 public 文件夹中，再像下面这样在我们的 HTML 文件中使用它们：

<link>css/reset.css">

需要注意的是，在 Vue CLI 3 中，如果我们将静态文件存放在 public 文件夹中，我们无需在 vue.config.js 文件中做任何配置。

总结

在 Vue.js 的开发过程中，我们通常会使用 Vue CLI 这个官方的脚手架来创建项目。当我们使用 Vue CLI 创建完项目后，如果发现没有生成静态文件夹，我们可以通过手动创建 static 文件夹或使用 public 文件夹来添加静态文件。如果您是一个正在学习 Vue.js 的新手开发者，相信本文对您可以有所帮助。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！