如何引导vue-cli将构建的项目文件放在不同的目录中？

Question

我现在向其他人展示了如何创建vue.js/Flask应用程序，我看到vue-cli的工作方式似乎发生了变化，因此我不再能够访问/build/文件夹。

我阅读了文档，他们似乎说它现在抽象掉了Webpack配置（“因为@vue/cli-service抽象掉了Webpack配置...”），但是如果我想查看Webpack的配置选项，我可以执行vue inspect>output.js。我这样做了，但没有看到八个月前我这样做时更改的条目：

/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',

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命令行命令可以接受允许您指定输出目录的参数，但是我需要指定两个不同的目录：一个用于HTML文件（应该位于Flask的/templates/文件夹中），另一个用于JavaScript/CSS代码（应该位于Flask的/statist/文件夹中）。

Answer 1

我只需要使用最新的Vue-CLI为一个新项目执行此操作，而且非常简单：我只需要在我的Vue项目的顶层有一个名为Vue.config.js的文件，在其中我需要以下代码：

const path = require("path");

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

警告：Vue-CLI将删除您指定用于其输出的任何文件夹的内容。为了解决这个问题，我在模板/和静态/目录中创建了“spa”文件夹。

还要注意，assetsdir是相对于outputdir指定的。