Vue：コンポーネントにCSSファイルとJSファイルをロードするにはどうすればよいですか？

bugfix> javascript > 投稿 2020-12-25 07:56

私はVueを初めて使用し、ロードしたいナビゲーションバーコンポーネントを作成しました。

これが私のコードです：

component.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&

このエラーはどういう意味ですか？どうすれば修正できますか？

javascript

vue.js

回答 2 件

CSSファイルをインポートするには、スタイルタグで@importを使用します。

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

また、ファイルへのパスが正しくありません。 ./ 。

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

これを行うには2つの方法があります。

これらはプロジェクト内のグローバルファイルです
リモートファイル（google fonts any httpファイル）をindex.htmlに直接ロードします

のバンドラーを介してプロジェクトファイルをロードします main.js または App.vue

と import '@/assets/plugins/bootstrap/css/bootstrap.min.css' 等々...

または、これらは特定のコンポーネントにロードする必要があるローカルファイルです
リンク、スクリプト、その他のHTMLタグをオンザフライで作成するのに役立つvue-metaプラグインを使用してリモートファイル（googleフォントまたは任意のhttpファイル）をロードします。頭タグhttps://vue-meta.nuxtjs.org/api/#link

プロジェクトファイルをロードする import '@/path/to/js/file' JSファイルまたはCSSの場合：
```
<style>
@import '@/path/to/js/file';
</style>
```

bugfix

Vue：コンポーネントにCSSファイルとJSファイルをロードするにはどうすればよいですか？

javascript

vue.js

関連記事