Vue - 我如何在組件中加載 CSS 和 JS 文件？

Question

我對 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>

assets目錄與組件位於同一文件夾中。

現在的問題是我有很多<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&

這個錯誤是什么意思？ 我該如何解決？

Answer 1

有兩種方法可以做到這一點：

這些都是您項目中的全局文件
- 直接在 index.html 中加載遠程文件（谷歌 fonts 任何 http 文件）
- 通過main.js或App.vue中的捆綁程序加載項目文件
- import '@/assets/plugins/bootstrap/css/bootstrap.min.css'等等...
或者，這些是需要在特定組件中加載的本地文件
- 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 /＃關聯
- 對於 JS 文件或 CSS，使用import '@/path/to/js/file'加載項目文件：

<style>
@import '@/path/to/js/file';
</style>

Answer 2

在樣式標簽中使用 @import 來導入 CSS 文件。

@import './assets/plugins/font-awesome/css/font-awesome.min.css'

文件的路徑也不正確，請使用./ 。

./assets/plugins/jquery/jquery-3.1.0.min.js

Vue - 我如何在組件中加載 CSS 和 JS 文件？

問題描述

2 個解決方案

解決方案1
2 2020-12-24 20:11:45

解決方案2
1 已采納 2020-12-24 19:00:53

Vue - 我如何在組件中加載 CSS 和 JS 文件？

問題描述

2 個解決方案

解決方案1 2 2020-12-24 20:11:45

解決方案2 1 已采納 2020-12-24 19:00:53

解決方案1
2 2020-12-24 20:11:45

解決方案2
1 已采納 2020-12-24 19:00:53