Vue.js 如何指示vue cli将生成的项目文件放在不同的目录中？

大概8-9个月前，我用Vue cli创建了一个网页包Vue.js项目，并且能够修改

/build/webpack.dev.conf.js

，让它在运行

npm run build

时将“编译的”

index.html

和JavaScript/CSS文件放在我的Flask应用程序的正确文件夹中

现在，我正在向其他人演示如何创建Vue.js/Flask应用程序，我发现Vue cli的工作方式似乎已经改变，因此我无法再访问

/build/

文件夹

我阅读了文档，现在它抽象掉了网页包配置（“因为@vue/cli service抽象掉了网页包配置…”），但是如果我想查看网页包的配置选项，我可以执行

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

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

/build/webpack.dev.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',

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

/config/index.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',

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代码（应该放在烧瓶的

/static/

文件夹中）.

老实说，我看不出您有什么问题，因为您已经看到了文档并直接指向了文档的右侧部分。我刚刚使用

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
脚本时，我的文件会转到
另一个dir
文件夹，html代码取自
test.html
。我想按照这种方法，您可以根据需要重新配置项目

希望我能正确理解你的问题，不要浪费大家的时间

编辑：这似乎是在按您的意愿放置文件，但出于某种原因，HtmlWebpackPlugin碰巧在
/dist
和
/templates
中创建了两次
/dist/
文件夹和输出.html文件。对于这一个，我还找不到解决方案。
我昨天自己也在挣扎，但还是设法破解了它最后，使用部分oniondomes answer和一些新文档：

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插件，我相信这会导致它抛出错误

我最初将配置作为对象，但这在尝试在开发模式下运行时会导致问题。通过将它们更改为函数，您可以指定只有在生产模式下构建时才会发生这种情况

通过从控制台运行以下命令，您可以随时看到使用这些覆盖生成的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' },
                ]});
        }
    }
}

根据相关的vuejs

警告

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

以及相关的vuejs配置

提示

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

下面是一个示例vue.config.js，我刚刚使用
vue cli服务
@3.0.0-rc.2对其进行了验证

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'
    }
  }
}

我只需要使用最新的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
指定的。默认情况下，生产文件内置在Vue项目的
/dist/
子文件夹中，并且应该部署在服务器的根文件夹（“/”）中。因此，为了从浏览器访问项目，您必须将它们复制到root。由于这并不总是方便的，您可能希望将它们构建到root的子文件夹中进行部署，例如
/subdir/vue\u project/dist/

在这种情况下，请按照中的建议重定向vue cli以生成此子文件夹的项目文件。为此，请执行
vue ui
，然后在localhost:8000打开cli 3.3+ui配置窗口，然后将
publicPath
的默认值更改为
/subdir/vue\u project/dist/
，并保存更改

如果您希望返回到开发（serve），请不要忘记在执行serve并访问localhost:8080之前将
publicPath
设置回
。
对于较新版本的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/'
    : '/'
}

更多信息：
您在
output.js
文件中到底要查找什么？我刚刚运行了这个命令，其中有
entry
和
output
属性，它们引用了您要查找的目录