Vue - 我如何在组件中加载 CSS 和 JS 文件？
[英]Vue - how can i load CSS and JS files in a component?
问题描述
I'm very new to Vue and i created a navbar component that i want to load.
我对 Vue 很陌生，我创建了一个要加载的导航栏组件。
Here is my code:这是我的代码：
component.vue组件.vue
<template>
<html>
<head>
...
<link href="https://fonts.googleapis.com/css?family=Gudea:400,700" rel="stylesheet">
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- Theme Styles -->
<link href="assets/css/flatifytheme.min.css" rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet">
...
</head>
<body>
...
<script src="assets/plugins/jquery/jquery-3.1.0.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="assets/plugins/waves/waves.min.js"></script>
<script src="assets/plugins/uniform/js/jquery.uniform.standalone.js"></script>
<script src="assets/plugins/switchery/switchery.min.js"></script>
<script src="assets/plugins/pace/pace.min.js"></script>
<script src="assets/js/flatifytheme.min.js"></script>
</body>
</html>
</template>
The assets directory is in the same folder as the component. assets目录与组件位于同一文件夹中。
Now the problem is that i have a lot of <link href=''> and <scripts> tags that load js and css files of the theme i'm using for the navbar and i don't know where to put them in the component, so i keep getting the following error:现在的问题是我有很多<link href=''>和<scripts>标签加载我用于导航栏的主题的 js 和 css 文件，我不知道将它们放在哪里组件，所以我不断收到以下错误：
This relative module was not found:
* ./components/testComponent in ./src/main.js, ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
What does this error mean?这个错误是什么意思？ How can i fix it?我该如何解决？
2 个解决方案
解决方案1
2 2020-12-24 20:11:45
There are two ways of doing this:有两种方法可以做到这一点：
- Either these are global files in your project这些都是您项目中的全局文件
- load the remote files (google fonts any http files) directly in your index.html直接在 index.html 中加载远程文件（谷歌 fonts 任何 http 文件）
- load the project files via the bundler in your
main.jsorApp.vue通过main.js或App.vue中的捆绑程序加载项目文件 - with
import '@/assets/plugins/bootstrap/css/bootstrap.min.css'and so on...import '@/assets/plugins/bootstrap/css/bootstrap.min.css'等等...
- load the remote files (google fonts any http files) directly in your index.html
- Or, these are local files that need to be loaded in specific components或者，这些是需要在特定组件中加载的本地文件
- load the remote files (google fonts or any http files) with vue-meta plugin which helps your create links, script and other HTML tags on-the-fly in the head tag https://vue-meta.nuxtjs.org/api/#link load the remote files (google fonts or any http files) with vue-meta plugin which helps your create links, script and other HTML tags on-the-fly in the head tag https://vue-meta.nuxtjs.org/api /＃关联
- load the project files with
import '@/path/to/js/file'for JS files or for CSS:对于 JS 文件或 CSS，使用import '@/path/to/js/file'加载项目文件：
- load the remote files (google fonts or any http files) with vue-meta plugin which helps your create links, script and other HTML tags on-the-fly in the head tag https://vue-meta.nuxtjs.org/api/#link
<style>
@import '@/path/to/js/file';
</style>
解决方案2
1 已采纳 2020-12-24 19:00:53
Use @import in the style tag to import CSS-files.在样式标签中使用 @import 来导入 CSS 文件。
@import './assets/plugins/font-awesome/css/font-awesome.min.css' @import './assets/plugins/font-awesome/css/font-awesome.min.css'
Also the paths to the files are incorrect, use ./ .文件的路径也不正确，请使用./ 。
./assets/plugins/jquery/jquery-3.1.0.min.js
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.