webpack - Vue-CLI 与 webpack 添加外部 Css 和 Js 文件

标签 webpack vuejs2 vue-cli

我将 Vue-cliwebpack 一起使用,并且在调用外部 jscss 文件时遇到问题在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

最佳答案

当您使用 vue cli 时,assets 文件夹将在捆绑期间由 webpack 处理,并且应包含 assets 文件夹中的文件通过js

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

或者您可以简单地将 CSSJS 文件存储到 /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>

关于webpack - Vue-CLI 与 webpack 添加外部 Css 和 Js 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43221097/

相关文章:

typescript - 自定义 webpack 配置别名在 ionic 2 中不起作用

javascript - Webpack 构建不渲染 HTML5 视频

javascript - 让 Rails Webpacker 仅在特定 View 中应用 JavaScript( yarn 管理的和非 yarn 管理的)

vue.js - 从子组件中修改 props.value

javascript - 更改 vuetify 列表中的按钮颜色

javascript - vue与php交互

webpack - vue-cli webpack 服务器自定义域

vuejs2 - Vue JS 组件监听孙组件的事件

vue.js - 为什么我不能在我的 Vue 应用程序上使用调试器或 console.log

node.js - 在 VueJS 中根据配置在构建时生成代码