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

Question

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

我现在向其他人展示如何创建Vue.js/Flask应用程序,我发现vue-cli的工作方式似乎已经改变,因此我无法再访问该/build/文件夹.

我读的文档和他们似乎在说,现在抽象出的的WebPack配置(" 由于@ VUE/CLI-服务抽象掉的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在新项目中执行此操作，这非常简单：我只需要vue.config.js在Vue项目的顶层创建一个名为的文件，并且在其中需要以下代码：

const path = require("path");

module.exports = {
  outputDir: path.resolve(__dirname, "../backend/templates/SPA"),
  assetsDir: "../../static/SPA"
}

请注意，Vue-CLI将删除您指定用于其输出的任何文件夹的内容。为了解决这个问题，我在templates/和static/目录中创建了“ SPA”文件夹。

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

Answer 2

根据相关的vuejs 指南

警告

某些webpack选项是根据vue.config.js中的值设置的,不应直接进行变更.例如,您应该使用vue.config.js中的outputDir选项,而不是修改 output.path; 而不是修改output.publicPath,您应该使用vue.config.js中的baseUrl选项.这是因为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'
    }
  }
}

Answer 3

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

在这种情况下，请按照https://cli.vuejs.org/config/#publicpath 中的建议重定向vue-cli以为此子文件夹构建项目文件。为此，请执行vue ui，然后在 localhost:8000 处打开 cli 3.3+ UI 配置窗口，然后更改publicPathto的默认值/subdir/vue_project/dist/并保存更改。

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

Answer 4

我昨天自己也在为此苦苦挣扎，但最终通过使用部分 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 5

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

// 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