如何指导 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/ 文件夹。

我阅读了文档和 they seemed to say，它现在抽象出 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/ 文件夹中）。

Answer 1

说实话，我看不出您遇到了什么问题，因为您已经看过文档并直接指出了文档的正确部分。我刚刚使用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 文件夹，并且 html 代码取自 test.html。我想按照这种方法，您可以根据需要重新配置您的项目。

希望我没有正确理解您的问题，并且没有浪费大家的时间。

编辑：这似乎是根据需要放置文件，但由于某种原因，HtmlWebpackPlugin 碰巧创建了dist/ 文件夹并在/dist 和/templates 中两次输出.html 文件。对于这个，我还没有找到解决方案。

Answer 2

我昨天自己也在为此苦苦挣扎，但最终通过使用部分 oniondomes 答案和一些新文档设法破解了它：

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 部分 - 这允许您覆盖所引用插件的任何现有配置。另一个答案是添加另一个 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' },
                ]});
        }
    }
}

Answer 3

根据相关的 vuejs guide

警告

一些 webpack 选项是基于 vue.config.js 和 不应该直接突变。例如，而不是修改 output.path，你应该在 vue.config.js 中使用 outputDir 选项； 而不是修改 output.publicPath，你应该使用 baseUrl vue.config.js 中的选项。这是因为 vue.config.js 中的值 将在配置中的多个地方使用以确保一切 一起正常工作。

以及相关的vuejs配置reference

提示

始终使用 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'
    }
  }
}

Answer 4

我只需要使用最新的 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/ 和 @987654324 中创建了“SPA”文件夹@ 目录。

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

Answer 5

默认情况下，生产文件内置在您的 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/ 并保存更改。

如果您想返回开发（服务），请不要忘记在执行服务和访问 localhost:8080 之前将publicPath 设置回/。

Answer 6

对于较新版本的 Vue.js，您只需在根文件夹的 vue.config.js 文件中设置正确的 publicPath：

// vue.config.js file to be place in the root of your repository

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/'
    : '/'
}

更多信息：https://cli.vuejs.org/guide/deployment.html#general-guidelines