使用webpack的Vue-CLI添加外部Css和Js文件

时间：2017-04-05 03:08:35

标签： webpack vuejs2 vue-cli

我将Vue-cli与webpack一起使用，我在调用js中的外部css和index.html文件时遇到问题。

enter image description here 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>gradana</title>
    <link rel="stylesheet" href="./src/assets/css/hello.css">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

如果我运行代码我有错误。

enter image description here 

Cannot GET /src/assets/css/hello.css

1 个答案:

答案 0 :(得分：2)

当您使用vue cli时，捆绑期间webpack会处理assets文件夹，而assets文件夹中的文件应包含在js

中

e.g. require('../node_modules/bootstrap/dist/css/bootstrap.min.css')。

或者您只需将CSS或JS个文件存储到/static文件夹中，static文件夹中的所有文件都会在运行应用时添加到/dist文件夹中

enter image description here

然后将其调入index.html

<强> CSS 

<link rel="stylesheet" href="/static/css/hello.css">

<强> JS 

<script src="/static/scripts/script.js"></script>
相关问题
最新问题