実際の Vue プロジェクトの運用とソリューションで遭遇する落とし穴

ピット 1. webpack でパッケージ化した後、index.html にアクセスするとリソース読み込み 404 問題が発生する

解決策: config のindex.js では、ビルドオブジェクトのassetsPublicPath属性のレベルが必要です。 '/' ' に調整します。/'

 1  build: { 2     env: require('./prod.env'), 3     index: path.resolve(__dirname, '../dist/index.html'), 4     assetsRoot: path.resolve(__dirname, '../dist'), 5     assetsSubDirectory: 'static', 6     assetsPublicPath: './', 7     productionSourceMap: false,12     productionGzip: false,13     productionGzipExtensions: ['js', 'css'],18     bundleAnalyzerReport: process.env.npm_config_report19   }

 1 dev: { 2     env: require('./dev.env'), 3     port: 8080, 4     autoOpenBrowser: true, 5     assetsSubDirectory: 'static', 6     assetsPublicPath: '/', 7     proxyTable: {}, 8     // CSS Sourcemaps off by default because relative paths are "buggy" 9     // with this option, according to the CSS-Loader README10     // ()11     // In our experience, they generally work as expected,12     // just be aware of this issue when enabling this option.13     cssSourceMap: false14   }

理由:

開発環境の静的フォルダーはルートディレクトリに基づいているため、 'を使用してください/' 直接 .たとえば、この形式は http://localhost:8080/static/img/logo.png です。

webpack パッケージ化では静的フォルダーが自動的にパッケージ化されることを誰もが知っているはずです。デフォルトでは、運用環境ファイルのルート ディレクトリとして dist フォルダーが生成され、静的フォルダーは dist 内に生成されます。したがって、生成される形式は http://localhost:8080/dist/static/img/logo.png となるはずです。ルート ディレクトリに基づいていないため、‘/’ は対応するリソースを見つけることができません。

これらの属性の意味を紹介します:

assetsRoot: Webpack 出力のターゲット フォルダー パス

assetsSubDirectory: Webpack コンパイルされた出力の 2 番目のフォルダー

assetsPublicPath: Webpack コンパイルされた出力のリリース パス (例: www / .woshichihuo.com/eat で食べるのはこのパスです

ピット 2. Webpack でパッケージ化した後、ローカルでindex.html にアクセスすると白い画面が表示され、リソースは正常に読み込まれます

解決策: ルーティング設定モードを履歴モードに設定しないでください。デフォルトは依然としてハッシュです。ルーターフォルダーの下のindex.jsファイル内。

1 const router = new Router({2   // mode: 'history',3   routes: [4     index,5     home6   ]7 })

履歴モードが必要な場合は、vue-router の公式ドキュメントを参照してください:

以上が実際の Vue プロジェクトの運用とソリューションで遭遇する落とし穴の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。