vueプロジェクトパッケージ後のピクチャファイルパスエラーの解決方法について

2727 ワード

vueプロジェクトのパッケージ化後、productionモードで画像‘404(not found)を提示し、dev環境でよく、パッケージ化するとこのエラーを提示する.なぜかというと、以前初めてvue-cliを使用してプロジェクトを構築したときは2つの画像ファイルしかありませんでした.当時、配置後にパスを間違えた問題を報告しました.当時の考えは簡単で乱暴で、buildの良いファイルでファイルパスを修正しました.その後、プロジェクトで静的なリソースが山積みになりました.パスを修正するのは明らかにできませんでした.生成ファイルを見てみるとファイルディレクトリが変わったことがわかるので、参照の経路も変えなければなりません.ネット上で最も簡単な方法は「config/index」を修正することです.js'ファイルのbuildモジュール:

// emplate for index.html
 index: path.resolve(__dirname, '../dist/index.html'),
 // Paths
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: './',

デフォルトを上記に変更し、静的ファイルディレクトリをstaticに変更し、静的パスを'./'に変更します.すなわち、相対パスです.OK?試してみると404もありますが、その時思いついたのは、コンポーネントdataに「require」という形で一つ一つ導入するしかないのでしょうか.これはjsに属するモジュールの導入方式で確かに可能であるが、煩雑すぎて、考えてみれば、この図を使用する際にhtmlドキュメント構造において「:bind」の方式でhtmlドキュメントにリソースをcodeの方式で加えることはできないというわけではなく、これでも所望の効果を実現することができるが、このようにするとドキュメント構造が不明確であるだけでなく、冗長度が高く、メンテナンスが面倒で、資源が多いときは膨大で煩わしい仕事で、無駄な勉強を増やすだけです.
このような第3の方法は、「build」ディレクトリの下のutilsを修正することである.jsファイル、ファイルのgenerateLoaders関数を次のように変更します.

 pluginfunction generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ?
     [cssLoader,     postcssLoader] : [cssLoader]

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../'                  //add
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

ポイントはif...else判断中の「publicPath:'../../'」です.buildは、サービス側に配置され、okは実行可能であり、styleで画像リソースを快適に使用することができます.
注:オリジナル文章、ご自由にお使いください、転載は出典を明記してください

Vueのいくつかの開発テクニック

vueでv-forを使用する場合、なぜindexをkeyとして使用できないのですか?