web-dev-qa-db-ja.com

ビルドされたプロジェクトファイルを別のディレクトリに配置するようにvue-cliに指示する方法は？

おそらく8〜9か月前にvue-cliでWebpacked Vue.jsプロジェクトを作成し、/build/webpack.dev.conf.jsを変更して、「コンパイル済み」のindex.htmlとJavaScript/CSSファイルをFlaskの適切なフォルダーに入れることができました。 _npm run buildを実行するとアプリ。

現在、他の人にVue.js/Flaskアプリの作成方法を示していますが、vue-cliの動作方法が変更されたため、/build/フォルダーにアクセスできなくなりました。

私はドキュメントを読んで 彼らは言うように思われた Webpack configを抽象化するようになりました（ "@ vue/cli-serviceはwebpack configを抽象化するため... "）、ただし、Webpackの構成オプションを表示したい場合は、vue inspect > output.jsを実行できます。私はそれをしましたが、8か月前にこれを行ったときに変更したエントリは表示されません：

/build/webpack.prod.conf.js：

new HtmlWebpackPlugin({
  filename: process.env.NODE_ENV === 'testing'
-    ? 'index.html'
+    ? 'app.html'
    : config.build.index,
-  template: 'index.html',
+  template: 'app.html',

/build/webpack.dev.conf.js：

new HtmlWebpackPlugin({
-   filename: 'index.html',
-   template: 'index.html',
+   filename: 'app.html',
+   template: 'app.html',

/config/index.js：

module.exports = {
  build: {
    env: require('./prod.env'),
-    index: path.resolve(__dirname, '../dist/index.html'),
-    assetsRoot: path.resolve(__dirname, '../dist'),
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    index: path.resolve(__dirname, '../../server/templates/app.html'),
+    assetsRoot: path.resolve(__dirname, '../../server/static/app'),
+    assetsSubDirectory: '',
+    assetsPublicPath: '/static/app',

vue buildコマンドラインコマンドは、出力ディレクトリを指定できる引数を受け入れることができますが、2つの異なるディレクトリを指定する必要があります。1つはHTMLファイル用（Flaskの/templates/フォルダに存在する）、もう1つはJavaScript/CSSコード（Flaskの/static/フォルダーに配置する必要があります）。

vue.jsvue-cli
19
Nathan Wailes

最新のVue-CLIを使用して新しいプロジェクトでこれを行う必要があり、非常に簡単でした。Vueプロジェクトの最上位にvue.config.jsというファイルが必要でした。その中に次のコードが必要でした：

const path = require("path");

module.exports = {
  outputDir: path.resolve(__dirname, "../backend/templates/SPA"),
  assetsDir: "../../static/SPA"
}

Vue-CLIは、出力に使用するよう指定したフォルダーの内容を削除することに注意してください。これを回避するために、templates/およびstatic/ディレクトリ内に「SPA」フォルダーを作成しました。

assetsDirは、outputDirに対して相対的に指定されることにも注意してください。

12
Nathan Wailes

関連するvuejsごと ガイド

警告

一部のwebpackオプションは、vue.config.jsの値に基づいて設定されるため、直接変更しないでください。たとえば、output.pathを変更する代わりにを使用する必要があります。vue.config.jsでoutputDirオプションを使用する output.publicPathを変更する代わりに、vue.config.jsのbaseUrlオプションを使用する必要があります。これは、vue.config.jsの値が構成内の複数の場所で使用され、すべてが適切に機能するようにするためです。

そして、関連するvuejs config reference

TIP

Webpack output.pathを変更する代わりに、常にoutputDirを使用します。

vue-cli-service @ 3.0.0-rc.2を使用して確認したばかりの例vue.config.jsを次に示します。

const path = require("path");

module.exports = {
  outputDir: path.resolve(__dirname, "./wwwroot/dist"),
  chainWebpack: config => {
    config.resolve.alias
      .set("@api", path.resolve(__dirname, "./src/api"));
  },

  pluginOptions: {
    quasar: {
      theme: 'mat'
    }
  }
}
11
bvj

デフォルトでは、プロダクションファイルはVueプロジェクトの/dist/サブフォルダーに組み込まれ、サーバーのルートフォルダー（ "/"）にデプロイされることになっています。したがって、ブラウザからプロジェクトにアクセスするには、それらをルートにコピーする必要があります。これは必ずしも便利ではないため、ルートのサブフォルダーで展開するためにビルドすることをお勧めします。 /subdir/vue_project/dist/。

この場合、 https://cli.vuejs.org/config/#publicpath のアドバイスに従ってリダイレクトvue-cliこのサブフォルダーのプロジェクトファイルをビルドします。これを行うには、vue uiを実行し、localhost：8000でcli 3.3+ UI構成ウィンドウを開き、publicPathのデフォルト値を/subdir/vue_project/dist/に変更して、変更を保存します。

開発（サーブ）に戻りたい場合は、publicPathを/に設定してから、serveを実行してlocalhost：8080にアクセスすることを忘れないでください。

4
vess

私は昨日これに苦労しましたが、オニオンドームの回答の一部と新しいドキュメントのいくつかを使用して、最終的にそれをクラックすることができました：

const path = require('path');    
module.exports = {
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            config.output.path = path.resolve(__dirname, './server/assets/static');
            config.output.publicPath = '../assets/static/';
            config.output.filename = '[name].js';
        }
    },
    chainWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            config
                .plugin('html')
                .tap(args => {
                    return [
                        {
                            filename: path.resolve(__dirname, './server/templates/test.html'),
                            template: path.resolve(__dirname, './public/index.html')
                        }
                    ];
                });
        }
    }
}

主な違いはchainwebpackセクションです-これにより、参照されるプラグインの既存の設定を上書きできます。もう1つの答えは、別のhtml-webpack-pluginを追加することです。これにより、エラーがスローされると考えられます。

私はもともと設定をオブジェクトとして持っていましたが、開発モードで実行しようとすると問題が発生しました。それらを関数に変更することにより、実動モードでビルドするときにのみこれが発生するように指定できます。

コンソールから次を実行することにより、これらのオーバーライドで生成されたwebpack構成をいつでも見ることができます

vue inspect > output.js

私が修正する必要がある問題は、C＃MVCプロジェクトに固有のもので、cshtmlページに出力する必要がありました。私はそれを必要とする誰のためにでもここに私の解決策を残します。

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:60263',
                changeOrigin: true
            }
        }
    },
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            config.output.publicPath = '/dist/';
            config.entry = ['babel-polyfill', './src/main.js']
        }
    },
    chainWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            config
                .plugin('html')
                .tap(args => {
                return [
                    { filename: '../Views/Home/Index.cshtml', template: 'public/index.html' },
                ]});
        }
    }
}
4
Edward Bonnett

正直に言うと、ドキュメントを見て、その右のセクションを直接指摘して以来、あなたがどのような問題を抱えているのかわかりません。 vue-cli 3.0を使用して新しいvue.jsプロジェクトを作成し、プロジェクトのルートディレクトリにvue.config.jsファイルを作成し、output.js（vue inspect > output.jsで自動的に作成）を見て、次のように書きました。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  configureWebpack: {
    output: {
      path: path.resolve(__dirname, './server/assets/static'),
      filename: '[name].js',
      publicPath: '../assets/static/',
    },
    plugins: [
      new HtmlWebpackPlugin({
        filename: path.resolve(__dirname, './server/templates/test.html'),
        template: path.resolve(__dirname, './public/test.html'),
      }),
    ],
  },
};

buildスクリプトを実行すると、ファイルがanother-dirフォルダーに移動し、test.htmlからhtmlコードが取得されます。この方法に従って、必要に応じてプロジェクトを再構成できると思います。

あなたの質問が正しいことを理解し、みんなの時間を無駄にしないことを願っています。

EDIT：これはあなたが望むようにファイルを配置しているようですが、何らかの理由でHtmlWebpackPluginがdist/フォルダーを作成し、/distと/templatesの両方で.htmlファイルを2回出力します。これについては、まだ解決策が見つかりませんでした。

2
oniondomes