如何让vue-cli把建好的工程文件放到不同的目录下？

Question

大概 8-9 个月前我用 vue-cli 创建了一个 Webpacked Vue.js 项目并且能够修改 /build/webpack.dev.conf.js 让它把 "compiled" index.html当我运行 npm run build.

时，我的 Flask 应用程序中正确文件夹中的 JavaScript / CSS 文件

我现在正在向其他人展示如何创建 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/ 文件夹并输出 .html 文件/dist 和 /templates 两次。对于这个我还没有找到解决方案。

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

WARNING

Some webpack options are set based on values in vue.config.js and should not be mutated directly. For example, instead of modifying output.path, you should use the outputDir option in vue.config.js; instead of modifying output.publicPath, you should use the baseUrl option in vue.config.js. This is because the values in vue.config.js will be used in multiple places inside the config to ensure everything works properly together.

以及相关的vuejs配置reference

TIP

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

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

Answer 5

默认情况下，生产文件内置在 Vue 项目的 /dist/ 子文件夹中，它们应该部署在服务器的根文件夹（“/”）中。因此，您必须将它们复制到根目录才能从浏览器访问该项目。由于这并不总是很方便，您可能希望构建它们以部署在根目录的 子文件夹 中，例如/subdir/vue_project/dist/.

在这种情况下，请按照 https://cli.vuejs.org/config/#publicpath 中的建议重定向 vue-cli 以为此子文件夹[=27= 构建项目文件].为此，请执行 vue ui，然后打开 cli 3.3+ UI 配置 window 在 localhost:8000 然后将 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

如何让vue-cli把建好的工程文件放到不同的目录下？

How to direct vue-cli to put built project files in different directories?

vue.js

vue-cli