web-dev-qa-db-ja.com

Vue Cli 3：定義された出力パス

以下で説明するように、最終ビルドの出力パスを構成する必要があります。

My Vueプロジェクトはデフォルトの構造ですが、出力パスはこの構造の外側にあります。

出力HTMLファイルは： ../main/resources/

すべてのアセットファイルの出力： ../main/assets/[js/css/img]

また、index.htmlファイルで、アセットを検索するパスは「js/name.js」などである必要があります。

私の現在のvue.config.jsはこれを提供していません：

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .tap(options => {
                return options;
            });
    },
    css: {
        sourceMap: true
    },


    baseUrl: '/',
    outputDir: '../main/resources/',
    assetsDir: '../main/assets/',
    runtimeCompiler: undefined,
    productionSourceMap: undefined,
    parallel: undefined,
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /\.(png|jpg|gif)$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                outputPath: '../main/assets/img',
                                name: '../main/assets/img/[name].[ext]'
                            }
                        }
                    ]
                }
            ]
        }
    }
}

誰かがこのファイルの設定を手伝ってくれますか？ありがとうございました！
親切に
tschaefermedia

申し訳ありませんが、私は他のプロジェクトで忙しかったです。 VueJSに戻ります。
更新：
GITの投稿に示されていることを試しました。私のvue.config.jsファイルは次のようになります。

const path = require('path');
module.exports = {
    css: {
        sourceMap: true
    },

    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8080',
                'changeOrigin': true,
                'secure': false
            }
        }
    },
    baseUrl: '',
    outputDir: '../main/resources/',
    assetsDir: '../main/assets/',
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .tap(options => {
                return options
            })
        config.module
            .rule('images')
            .test(/\.(png|jpe?g|gif|ico)(\?.*)?$/)
            .use('url-loader')
            .loader('url-loader')
            .options({
                name: path.join('../main/assets/', 'img/[name].[ext]')
            })
    }
}

必要に応じてすべてが動作するようになりましたが、画像は正しいフォルダーにコピーされません。
In ".../assets /"cssおよびjsフォルダーがありますが、imgフォルダーはありません。 ".../ressources"in myindex.htmlファイルこのフォルダーがあります。

vue.jsvuejs2vue-cli
9
tschaefermedia

ビルドで問題をテストした後、2つの変更が必要だと思います。

vue.config.js

module.exports = {
  ...
  outputDir: '../main/resources/',
  assetsDir: '../assets/',
  ...
}

そしてwebpackプラグインを忘れる！

参照 config：assetsDir

assetsDir

タイプ：文字列

デフォルト： ''

生成された静的アセット（js、css、img、フォント）をネストするディレクトリ（outputDirに相対的）。

そのため、アセットは../main/resources/../assets/に相当する../main/assets/になります。

プロジェクト内の画像の場所

IMO（テストから）の最適な場所は、静的リソース用の古いCLI2フォルダーである<project folder>/staticを使用することです。実際、srcの外部にある任意のフォルダーが実行します。これにより、「webpacked」ではなく、現状のまま処理されます。

静的アセットの処理 を参照してください

"Real" Static Assets...比較すると、static /のファイルはWebpackによってまったく処理されません。同じファイル名で最終的な宛先にそのままコピーされます。

非常に正しいことに注意してください、彼らはバージョン管理ハッシュを取得します（以下を参照）。

これにより、次のビルドフォルダー構造が得られます。

../main
  assets/
    css/
    fonts/
    images/
    js/
  resources/
    index.html

CLI 3では、/staticフォルダーは/public/staticに変更されましたが、イメージをそこに配置すると、extraコピーが../main/resources/staticの下で作成されます。

この場所を希望する場合（標準のまま）、package.jsonのpostbuildスクリプトを使用してそのコピーを削除できます。たとえば、Windowsでnpm runを使用すると、

package.json

{
  ...
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "postbuild": "rd /s /q \"../main/resources/static/images\"",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {

画像参照

ソースでは、相対的な画像参照が正常に機能することがわかりました。

例えば、

import myPic from '../public/static/images/myPic.png'

に変更されます

../assets/img/myPic.ec4d96e7.png

ビルドされたapp.jsで。

バージョン管理用に追加されたハッシュに注意してください。

ビルドの提供

Index.htmlはmain/resourcesにあり、このサーバーはmain/assetsからフェッチできないため、使用するフォルダー構造は単純なhttp-serverで提供できないことに注意してください。

私はあなたの配備メカニズムがそれを大事にしていると思いますか？

4
Richard Matsen