Vue-cli足場包装の静的資源要求が間違った原因と解決

3094 ワード
vue-cli 足場 包装する
問題
  • vue-cliのデフォルトの構成は、パッケージ化された後、特定の経路に配置された静的リソース経路エラー問題である。
  • 静的リソースパッケージは相対パスを使用した後、cssファイルに大きな画像パスエラーを導入する
    • 。
    vue-cli 2足場を使って生成されたデフォルトのパッケージ設定ファイルは、npm run buildでパッケージ化され、プロジェクトは特定のパスに展開されます。
    この時のアクセス/ip:port/test/index.は正常にアクセスできますが、参照するjsやcssなどのファイルサーバは404に応答しています。この時はリソース要求経路を確認します。
    
http://ip:port/static/css/app.[hash].css
http://ip:port/static/js/app.[hash].js
    上記の静的リソースアクセス経路は正しくないことが分かります。私たちが正しい要求経路は
    
http://ip:port/test/static/css/app.[hash].css
http://ip:port/test/static/js/app.[hash].js
    原因
    リソースのロードに失敗した原因はパスエラーであることが分かります。index.ファイルを見て、
    
<!DOCTYPE html>
 <html>
 <head>
 <title>project</title>
 <link href=/static/css/app.css rel=stylesheet>
 </head>
 <body>
 <div id=app></div>
 <script type=text/javascript src=/static/js/app.js>
 </script>
 ...
 </body>
 </html>
    導入されたcssとjsはすべて使用される絶対ルートディレクトリパスであることが分かるので、特定のディレクトリにプロジェクトを配置し、導入されたリソースパスは正確に解析できない。
    解決
    webpackパッケージ化時に、相対パスを使用して静的リソースを処理し、buildにおけるリソースリリース経路構成を修正する（build/config.js）。
    
build: {
 ...
 // Paths
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: './',
 ...
}
    assites PublicPath:'/'を、astes PublicPath:'/'に変更してパッケージ化し、特定のパスにリソースを配置してアクセスします。この時index.は正常にアクセスできます。また、jsとcssリソースも正常にロードできます。
    cssの中でassitesディレクトリの下のピクチャーの資源を導入して間違いがあります。
    私たちはよくこのように一つの写真を引用します。
    
background: url('static/img/bg.png');
    でも、包装してこの写真を見たら、引用住所はこうです。
    
http://ip:port/test/static/css/static/img/bg.png
    css中の画像の経路に問題があると見られます。パッケージ化過程を分析します。cssはjsに導入されたものか、またはvueファイルに書かれたものです。cssファイルはまずless、postcssなどによって処理され、処理後はExtractTextPluginによって処理されます。ExtractTextPluginはjs中のcssをap.csファイルから全部引き出します。
    解決方法一
    options.extractをfalseに設定します。
    
options.extract: false,
    css機能をオフにして、再度包装して展開します。cssファイルがないことが分かります。cssファイルは全部ap.jsファイルの中にあります。jsを通じてcssをindex.htmlファイルに注入します。この時、画像のアクセス経路はかなりindex.ファイルですので、正常にアクセスできます。
    ソリューション2
    ExtractTextPluginプラグインのpublicPathを設定します。
    ExtractTextPluginプラグインは、cssをjsファイルから引き出すために、Extract TextPluginの静的リソースパスパラメータを設定することによって、同じ効果を達成することができます。buildディレクトリの下のutils.jsファイルは、publicPath:'./';
    
// 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: '../../'
 })
} else {
 return ['vue-style-loader'].concat(loaders)
}
    再度包装して配置します。この時の写真のアクセス経路は'././.static/img/bg.png'です。
    publicPath属性値はパッケージされたap.cssファイルからindex.ファイルまでの相対パスです。
    締め括りをつける
    以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考学習価値を持ってほしいです。ありがとうございます。
    Javaでレジストリを読む方式PreferencesとjRegistryを話します。
    Vue-cliでグローバルSAss、less変数を設定する方法