Vue-Cli2.XX静的リソースフォルダのパス配置の問題

直接本題に入ります.ここではvuecili 3の以前のバージョンについて説明します.
一般的にvuecli 3以前のバージョンでプロジェクトを作成する場合、ルートディレクトリの下にstaticフォルダがあります.このフォルダはimagesやjsonなどの静的ファイルを配置するために使用されます.同じようにルートディレクトリの下のsrcの下にassetsフォルダが静的ファイルを配置しています.assetsの中の静的リソースはwebpackにパッケージされてコンパイルされます.staticの下の静的リソースは、パッケージコンパイル時にdistフォルダの下にのみ割り当てられます.だから一般的なプロジェクトの開発はすべて小さいピクチャーをassetsの中に置いて、直接base 64のファイルにパッケージして、その他の静的な資源はstaticファイルの下に置いて、assetsの利点はピクチャーが直接base 64コードにコンパイルすることで、体積を圧縮したことに等しくて、利点は明らかで、しかし同様に圧縮して、どうして静的な資源をすべてassetsフォルダの下に置かないのですか?staticフォルダの下に置かれたファイルをサーバに配置するときにキャッシュロードを利用しやすいとネットで言われています.のこれは私が具体的にまだ研究していないので、しばらく待ってから研究します.
では、本文のポイントは以上ではありません.私がここで言ったのは、経路の問題です!!!デフォルトのvuecliの構成に従うと、パッケージされたファイルがdistディレクトリの下に表示され、distディレクトリの下にindexがあります.htmlファイルとstaticフォルダは、サーバ側に配置する場合、他の要求がなければ、distの中のファイルをサーバルートディレクトリに直接捨てればいいのですが、サーバがnodeで構築されている場合はstaticフォルダの権限アクセスをオンにします.このようなフロントエンドファイルがサーバ側に配置されます!
でも!でも!しかし、サービス側ではpublicのような静的フォルダがある場合があります.統一のために、staticの下の静的ファイルをpublicの下に置かないのはなぜですか.後期のバックエンドサーバの静的リソースの削除・変更操作を便利にしますか.この时、staticディレクトリをpublicディレクトリに直接舍てると、それはだめです.フロントエンド开発はとっくに静的资源の経路を书いていたので、publicの下に舍てると、フロントエンドコードを再修正しなければなりません.では、问题が来ました.フロントエンドはあなたのコードを修正しましょう...一般的に開発前に、バックエンドはサービス側のディレクトリ構造をフロントエンドに伝えます.そうすれば、フロントエンドはコードを引くときに、バックエンドのディレクトリ構造に合わせます.例えば、静的リソースをバックエンドpublicフォルダの下に置かなければなりません.配置後に正常にアクセスできる問題を解決するには、フロントエンドはどのように構成しますか.
フロントエンド:
1、staticフォルダを削除し、ルートディレクトリにpublicフォルダを作成し、publicフォルダの下にstaticフォルダを作成する.
2、構成:
(1)、configディレクトリの下のindexを修正する.jsコード、注意してください:ここで修正した開発モードのパス構成、ここの構成は主にcopy-webpack-pluginプラグインが使用するパスです:

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'public/static',
    assetsPublicPath: '/',
    proxyTable: {},

次にwebpackを修正する.dev.config.jsファイル、ここでもpublic/staticに変更:

 // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../public/static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])

以上は開発モードのファイル修正です.つまり、npm run devファイルを実行するとブラウザでデバッグを正常に実行できます.(ここで分からない点がありますが、なぜ開発モードでも、copy-webpack-pluginというプラグインのパスを設定するのでしょうか?、開発モードは必要ないような気がしますので、上記の設定では、コピーしたファイルとソースファイルのアドレスが同じなので、コピーしていないに等しいことがわかります)、しかし、コンパイル後のファイルをパッケージ化してサービス側に配置することを目的としています.はい、buildモードでの構成をindexで構成します.jsファイル:

 build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    //   index.html              
    assetsSubDirectory: 'public/static',
    //     ，index.html    src  js,css        
    assetsPublicPath: '/',

Webpackでprod.configファイルの下:

 // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../public/static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ])

実はdevモードの構成と基本的に同じです.
buildパッケージファイルだけなのに、なぜdevモードで設定するのかと聞かれるかもしれません.なぜなら、staticディレクトリを削除し始めたばかりなので、npm run devを実行すると、staticディレクトリが見つからないとデバッグできないので、開発モードの構成も変更しなければなりません.最後に、すべての構成が完了した後、npm run buildを実行すると、正常にパッケージ化されます.パッケージ化するとdistディレクトリの下にpublicファイルが1つ増えていることに気づき、クリックして開くとstaticディレクトリがあります.のその後、distの下にあるファイルをサービス側のルートディレクトリに捨てると、正常に閲覧できます(publicアクセス権限を開くのを覚えています)、私たちはあまり役に立たないように見えますが、実際には、私たちのファイルを配置するときに、フロントエンドの静的ファイルが非ルートディレクトリに配置される必要がある限り、上の方法で、サービス側の要求に応じて、フロントエンドのファイルディレクトリを柔軟に構成することができます...
vuecli 3はディレクトリ構造を調整したそうで、中にはpublicディレクトリが入っているそうですが、そのせいか、まだ検討されていません.の以上の考え方は間違っているところがあって、大神が多く指導することを望みます