vue-cliとwebpackを使ってビルドした後、cssとjsファイルを読み込めませんか？

Question

バックエンドとしてkoa2を使用し、ページをレンダリングするためにkoa-swigを使用しています。構造は次のとおりです。

index.htmlとstaticがあります。すべてのcss、js、および画像がそこにあります。そして、ここでエラーがある：ここでは

はWebPACKののconfig/index.jsでビルド設定です：あなたはVue.jsアプリを構築した後

build: { 
    env: require('./prod.env'), 
    index: path.resolve(__dirname, '../dist/index.html'), 
    assetsRoot: path.resolve(__dirname, '../dist'), 
    assetsSubDirectory: 'static', 
    assetsPublicPath: '/', 
    productionSourceMap: true, 
    productionGzip: false, 
    productionGzipExtensions: ['js', 'css'], 
    bundleAnalyzerReport: process.env.npm_config_report 
    } 

Answer 1

、あなたの出力ファイルはdist/フォルダで利用できるようになります。

この時点以降、Webpackビルド設定は問題になりません。重要なのは、サーバーが要求をどのように処理するかです。 distフォルダの

内容は、次のようになります：

1. index.htmlファイル
2. staticフォルダ

私はあなたがエンドツーエンドのためにあなたのサーバーに上記のファイルをコピーしますと仮定しますテスト。

index.htmlあなたの静的フォルダ内のファイルへのリンクは、<script>または<link>の平文タグを使用しています。ブラウザがindex.htmlを取得した後、app.xyz.js,vendor.xyz.jsなどの他のすべてのファイルを要求するようになります。これらの静的ファイルがデフォルトパスでアクセスできるようにするか、パスを変更する必要があります。

<script type="text/javascript" src="/static/js/app.xyz.js"></script> 

はあなたが要求が務め取得されていない理由を確認するために、サーバのログを見てする必要があります

<script type="text/javascript" src="/static_files/scripts/app.xyz.js"></script> 

に変更する必要があるかもしれません。サーバー側のエラーを修正すると、Vueアプリはプロダクションモードで正常に動作します。

Answer 2

設定assetsPublicPath: '/'をassetsPublicPath: '../dist'に変更するだけで動作します。