vueプロジェクト開発実戦(二)——vueプロジェクトパッケージ

前回私たちはすでにvueプロジェクトを設立することに成功しました.プロジェクトのフロントエンドとしてバックエンドとドッキングするためにパッケージ化しなければなりません.私たちは今完成したのはウェブページのようなものですが、その後の仕事の準備もしなければなりません.
プロジェクト構造
前に言ったvueプロジェクトの構造を復習します

.
├── dist/                      #        ，      
│   └── ...
├── node_modules/               #         
│   └── ...
├── src/
│   ├── main.js                 #     
│   ├── App.vue                 # vue     
│   ├── components/             # vue     
│   │   └── ...
│   └── assets/                 #       
├── index.html                   #      
├── webpack.config.js            # webpack            
├── ...     

理論的にはnpm run buildだけで梱包できます

npm run build

その後distフォルダとindex.htmlパッケージとしてOKですがindexを開きます.htmlその後、コンポーネントに追加した静的ピクチャにパスエラーが報告されていることがわかりました.build.jsも正常にロードされていません.ページ全体が空いていて、つらいです.
プロファイルの変更
初歩的な判断はwebpackかもしれません.config.jsの中の経路に問題があって、模索した後、私はmodule.exportsの下のoutputはこのように変更されました

webpack.config.js
output:{
    path:path.resolve(__diename,'./dist/'),
    publicPath:'./dist/',
    filename:'build.js'
}

今からnpm run buildを行うと正しい効果が見られるはずですが、このように設定するとnpm run devはリアルタイムで効果を更新できないことに気づきました.まだ解決策が見つかっていないので、開発の過程で上のものを戻します.

webpack.config.js
output:{
    path:path.resolve(__diename,'./dist/'),
    publicPath:'/dist/',
    filename:'build.js'
}