bugfix> javascript > 投稿

私は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&

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

回答 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>
    
    

あなたの答え