What's wrong with the vue scaffolding creation project without static files?

With the continuous development of front-end technology, more and more front-end frameworks are introduced into our daily development. Among these frameworks, Vue.js is increasingly favored by developers as a fast and lightweight front-end framework. During the development of Vue.js, we usually use Vue CLI, the official scaffolding, to create projects. However, in some cases, when we use Vue CLI to create a project, we find that the static folder is not generated, which may be confusing to novice developers. This article will take you through how to solve this problem commonly encountered.

First let’s understand why this happens. When we create a new project through Vue CLI, Vue CLI will initialize some default configuration and structure as the project's base files. These files are contained in a folder called src in the root directory of the project. By default, Vue CLI does not generate a folder containing static files for us. So when we try to access static folder resources, such as CSS or JavaScript files, we usually see a 404 error page.

So, how to add a static folder to the project created by Vue CLI? Two different methods are introduced below:

Method 1: Manually create a static folder

First, we need to manually create a folder named static in the root directory of the project. This folder will be used to store static resource files. You can create some subfolders under the static folder to store different types of static resources. For example, we can create a CSS folder and store all CSS files in it; we can also create an images folder to store all image resources.

To let Vue CLI know that we have created a static folder, we need to find a file named vue.config.js in the root directory and open it. If you don't have the file, you will need to create it manually. Add the following code to the vue.config.js file:

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

This code tells Vue CLI to copy all the contents of the static folder to the root directory of the project when building the project. Now, you can put your static resource files into the static folder and use them normally in your Vue.js project.

Method 2: Use the public folder

Vue CLI also provides another way to add static files to the project. This way is to store static files in the public folder. The public folder is different from the src folder and will not be compiled and packaged into the final project. Instead, they will be copied to the final built project root directory.

To use this method, we only need to put the static resource files into the public folder, and then use them in our HTML files as follows:

<link rel="stylesheet" href="<%= BASE_URL %>css/reset.css">

It should be noted that , in Vue CLI 3, if we store static files in the public folder, we do not need to do any configuration in the vue.config.js file.

Summary

During the development process of Vue.js, we usually use Vue CLI, the official scaffolding, to create projects. After we create the project using Vue CLI, if we find that the static folder is not generated, we can add static files by manually creating a static folder or using a public folder. If you are a novice developer who is learning Vue.js, I believe this article can be helpful to you.

The above is the detailed content of What's wrong with the vue scaffolding creation project without static files?. For more information, please follow other related articles on the PHP Chinese website!