如何指示 vue-cli 将构建的项目文件放在不同的目录中? [英] How to direct vue-cli to put built project files in different directories?

问题描述

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

Maybe 8-9 months ago I created a Webpacked Vue.js project with vue-cli and was able to modify /build/webpack.dev.conf.js to have it put the "compiled" index.html and JavaScript / CSS files in the right folders in my Flask app when I run npm run build.

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

I am now showing someone else how to create a Vue.js / Flask app and I see that the way vue-cli works seems to have changed, so that I no longer have access to the /build/ folder.

我阅读了文档，他们似乎说 它现在抽象出了 Webpack 配置(因为@vue/cli-service 抽象出了 webpack 配置...")，但是如果我想查看 Webpack 的配置选项，我可以这样做vue 检查 >输出.js.我这样做了，但没有看到我八个月前这样做时更改的条目:

I read the docs and they seemed to say that it now abstracts away the Webpack config ("Since @vue/cli-service abstracts away the webpack config..."), but that if I want to see Webpack's config options, I can do vue inspect > output.js. I did that and don't see the entries in there that I changed when I did this eight months ago:

/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/ 文件夹中).

It looks like the vue build command-line command can accept an argument that allows you to specify the output directory, but I need to specify two different directories: one for the HTML file (which should live in Flask's /templates/ folder), and another for the JavaScript / CSS code (which should go in Flask's /static/ folder).

推荐答案

我只需要使用最新的 Vue-CLI 为一个新项目执行此操作，这非常简单:我只需要一个名为 的文件vue.config.js 位于我的 Vue 项目的顶层，在其中我需要以下代码:

I just had to do this for a new project using the latest Vue-CLI and it was pretty simple: I just needed to have a file called vue.config.js at the top-level of my Vue project and within it I needed the following code:

const path = require("path");

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

警告:Vue-CLI 将删除您指定用于其输出的任何文件夹的内容.为了解决这个问题，我在我的 templates/ 和 static/ 目录.

Warning: Vue-CLI will delete the contents of whatever folders you specify to use for its output. To get around this, I created the "SPA" folders within my templates/ and static/ directories.

还要注意 assetsDir 是相对于 outputDir 指定的.

Note also that the assetsDir is specified relative to the outputDir.

这篇关于如何指示 vue-cli 将构建的项目文件放在不同的目录中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！