如何在 vue-cli 中设置生产构建路径？

Posted 2023-02-22

【中文标题】如何在 vue-cli 中设置生产构建路径？

【英文标题】：How can I set production build path in vue-cli?

【发布时间】：2020-08-18 08:49:34

【问题描述】：

我正在使用 vue-cli 工具开发 vuejs 应用程序，并且我也在开发服务器，所以我想在我的服务器中构建 /dist 文件夹以将其作为静态发送到浏览器，但我没有'甚至不知道 /dist 文件夹在哪里。

有一个 webpack.prod.config.js 文件（我认为是用于生产的 webpack 配置），在路径输出字段中，我尝试写入路径但没有用。

【问题讨论】：

见cli.vuejs.org/config/#vue-config-js和cli.vuejs.org/config/#outputdir

/dist 文件夹是build 脚本的默认输出目录。因此，除非您修改 vue.config.js 中的输出目录，否则运行 npm run build 将为您创建包含生产版本的文件夹。该目录的内容是您应该在生产服务器上部署的内容（在构建之后）。它是静态的。

@fxndvi 请看看我的回答，如果它对您有帮助或者您有任何其他相关问题，请告诉我。

@fxndvi 请看下面我的回答，如果对您有帮助，请标记为正确答案，谢谢！

【参考方案1】：

/dist 只是 VueJS 的默认设置。如果你想修改这个：正如 VueJS 的文档所述：

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

创建一个 vue.config.js 作为可选配置文件，如果它存在于您的项目根目录中（在 package.json 旁边），它将由 @vue/cli-service 自动加载。

文件应该导出一个包含选项的对象：

// vue.config.js
module.exports = 
  // options...

正如其他在 cmets 中已经说明的那样，在运行 vue-cli-service build 时，使用 outputDir 指定将生成生产构建文件的目录。请注意，目标目录将在构建之前被删除（此行为可以通过在构建时传递 --no-clean 来禁用）。

// vue.config.js
module.exports = 
  outputDir : ''