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

Question

也许 8-9 个月前，我使用 vue-cli 创建了一个 Webpacked Vue.js 项目，并且能够修改 /build/webpack.dev.conf.js 让它放置“已编译” index.html 和 JavaScript / CSS 文件当我运行 npm run build 时，在我的 Flask 应用程序的正确文件夹中。

我现在正在向其他人展示如何创建 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',

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

原文由 Nathan Wailes 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 将删除您指定用于其输出的任何文件夹的内容。 为了解决这个问题，我在我的 templates/ 和 static/ 目录中创建了“SPA”文件夹。

另请注意， assetsDir 是相对于 outputDir --- 指定的。

原文由 Nathan Wailes 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

根据相关的 vuejs 指南

警告

一些 webpack 选项是根据 vue.config.js 中的值设置的，不应该直接改变。例如，您应该 使用 vue.config.js 中的 outputDir 选项， 而不是修改 output.path ；您应该使用 vue.config.js 中的 baseUrl 选项，而不是修改 output.publicPath。这是因为 vue.config.js 中的值将在配置中的多个位置使用，以确保一切正常工作。

以及相关的 vuejs 配置 参考

小费

始终使用 outputDir 而不是修改 webpack output.path。

这是我刚刚使用 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'
    }
  }
}

原文由 bvj 发布，翻译遵循 CC BY-SA 4.0 许可协议