Vue-CLI使用webpack添加外部CSS和JS文件

Question

Vue-CLI使用webpack添加外部CSS和JS文件

3

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

<!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>

如果我运行这段代码，就会出现错误。

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

- jrpikong

1

我找到了解决方案：我在 App.vue 中添加了以下代码<style> @import './assets/css/hello.css'; - jrpikong

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Abhishek Pandey · Accepted Answer

由于您正在使用 vue cli，assets 文件夹将在打包期间由 webpack 处理，assets 文件夹中的那些文件应该由 js 引入。

例如：

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

或者，您可以简单地将 CSS 或 JS 文件存储到 /static 文件夹中，运行应用程序时，static 文件夹中的所有文件都将添加到 /dist 文件夹中。

然后将其调用到 index.html 中。 CSS

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

JS

<script src="/static/scripts/script.js"></script>