尝试在Vue JS应用程序中加载静态CSS文件给出404

Question

我正在使用webpack简单项目时间开发Vue JS应用程序(版本2.5.17(，并试图在我的主要应用程序组件中加载一个静态css文件。

我有文件在：

src/static/reset.css

然后在我的主要应用程序组件模板中：

<link rel="stylesheet" type="text/css" href="/static/reset.css">

我使用npm run dev服务

然而，CSS文件返回404错误，我可以通过尝试访问来确认：http://localhost:8080/static/reset.css

我的目录结构：

C:.
|   .babelrc
|   index.html
|   output.doc
|   package-lock.json
|   package.json
|   README.md
|   webpack.config.js
|                
---src
|   App.vue
|   main.js
|   routes.js
|   
+---assets
|   |   logo.png
|   |   
|   ---css
+---components
|   |   Home.vue
+---static
|       reset.css
|       
---store
|   store.js
|   
---modules
recipe.js

Answer 1

您可以将css文件放在assets/css文件夹中，然后通过执行import '@/assets/css/reset.css'将其导入到main.js中。看看我怎么能在GitHub上为许多其他变体包含一个css文件。