无法使用 Vue.js CLI 从 bower_components 加载资源

Question

在我的项目中，我在尝试引用 CSS 和 JS 文件时收到以下错误

Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/bower_components/bootstrap/dist/css/bootstrap.min.css

这是我的文件结构

app
    |bower_components
        |bootstrap
            |dist
                |css
                   | bootstrap.min.css
        |jquery
            |dist
                |jquery.min.js
    |build
    |config
    |node_modules
    |src
    |static
    |index.html //The file I am receiving error on
public //using Slim framework with PHP to generate RESTful API
src
vendor

在我的 index.html 文件中，我使用以下代码尝试引用 bootstrap.min.css 文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Template</title>
    <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

我正在使用 Visual Studio 代码，这使得能够 CTRL+单击 link 到 bootstrap.min.css 文件并且加载正常，所以我不确定我在哪里这里出错了？

我正在使用 vue.js CLI 作为 app 文件夹，并使用 Slim Framework 和 PHP 在public/src/vendor 个文件夹是否有帮助？任何帮助将不胜感激。

Answer 1

我能够解决这个问题，它与使用 Vue.js CLI 相关联。

我需要将 bower_components 文件夹添加到静态文件夹中，然后像

一样引用该文件

<link rel="stylesheet" href="./static/bower_components/bootstrap/dist/css/bootstrap.min.css">

无法使用 Vue.js CLI 从 bower_components 加载资源

Failed to load resource from bower_components using Vue.js CLI

html

css

bower

vue.js