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

Question

我正在使用 webpack-simple 项目时间开发一个 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 上的 How the hell can i include a css file 了解许多其他品种。