如何将Vue-CLI指导将构建的项目文件放在不同目录中

也许是8-9个月前，我使用vue-cli创建了一个webpackpackpackpake.js project，并且能够修改 /build/webpack.dev.conf.js以使其放置在" comperied" index.html和javascript/css文件中运行npm run build时，我的烧瓶应用程序中的正确文件夹。

我现在正在向其他人展示如何创建vue.js/flask应用程序，我看到Vue-Cli的工作似乎已经改变了，因此我不再可以访问/build/文件夹。

我阅读了文档，他们似乎说它现在抽象了WebPack config(" 以来我想查看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文件(应该在Blask的/templates/文件夹中使用(和JavaScript/CSS代码的另一个(应在Blask的/static/文件夹中使用(。

我只需要使用最新的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的指定的。

更新2023：

这是我使用vite.config.js文件时所做的：

import { defineConfig } from 'vite'
export default defineConfig({
  (...)
  build: {
    outDir: '../backend/dist'
  }
})

根据相关的Vuejs指南

警告

基于vue.config.js和不应直接突变。例如，而不是修改 output.path ，您应该在vue.config.js中使用outputdir选项; 您应该使用baseurl，而不是修改输出。 vue.config.js中的选项。这是因为vue.config.js中的值将在配置内的多个位置使用，以确保所有内容一起工作。

和相关的vuejs配置参考

提示

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

这是一个示例 vue.config.js ，我刚刚使用 vue-cli-service @ 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项目的/dist/子文件夹中，并且应该将其部署在服务器的根文件夹("/"(中。因此，您将必须将它们复制为root，以便从浏览器访问项目。由于这并不总是方便的，因此您可能希望在root的A subfolter 中构建它们以部署为例。/subdir/vue_project/dist/。

在这种情况下，请在https://cli.vuejs.org/config/#publicpath上遵循建议 vue-cli 以构建此 subfolder vue-cli em>。为此，请执行vue ui，然后在LocalHost上打开CLI 3.3 UI配置窗口：8000，然后将publicPath的默认值更改为/subdir/vue_project/dist/并保存更改。

如果您想返回开发(服务(，请不要忘记将publicPath设置为/，然后再执行服务和访问Localhost：8080。

我昨天我自己为此苦苦挣扎，但最终通过使用洋葱答案和一些新文档来解决它：

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，我认为这会导致它丢弃错误。

我最初将配置作为对象，但是在尝试以DEV模式运行时会引起问题。通过将它们更改为函数，您可以指定仅在生产模式下构建时才发生。

在任何时候，您都可以通过从控制台

运行以下内容来看到与这些覆盖生成的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' },
                ]});
        }
    }
}

使用vue.js的较新版本，您只需要在root文件夹上的文件 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.s.org/guide/deployment.html#general-guidelines

说实话，我看不到您遇到了什么问题，因为您已经看到了文档并直接指向其正确的部分。我刚刚使用vue-cli 3.0创建了一个新的vue.js项目，在Project的root Directory中创建了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和/templates中两次创建dist/文件夹并输出.html文件。对于这个，我还找不到解决方案。

更新2023：

相关内容

最新更新

热门标签：