Vue-CLI 3 环境打包目录结构差异记录

前端

2023-10-04 17:37:57

使用 Vue-CLI mode 区分环境时，打包目录结构的解决之道

问题：环境区分导致的目录结构差异

在开发过程中，我们可能需要将项目区分不同的环境，例如开发环境和生产环境。在 Vue 项目中，我们可以使用 mode 选项来指定环境。然而，当使用 mode 选项打包时，打包后的目录结构与默认打包时的结构存在差异。

默认情况下，Vue-CLI 会将打包后的文件输出到 dist 目录。而使用 mode 选项打包时，会输出到环境相关的目录，例如 dist-production 或 dist-development。

原因：打包配置的影响

这种差异源于 mode 选项会影响打包配置。默认打包配置指向 dist 目录。但当使用 mode 选项时，打包配置会指向环境相关的目录。

解决方案：

解决这个问题有两种方法：

1. 手动修改打包配置

修改 vue.config.js 文件，将打包配置指向 dist 目录。具体代码如下：

// vue.config.js
module.exports = {
  configureWebpack: {
    output: {
      path: path.resolve(__dirname, 'dist'),
    },
  },
};

2. 使用配置合并

在使用 mode 选项时，可以在 package.json 文件中指定一个额外的 Webpack 配置文件。在这个配置文件中，可以覆盖默认打包配置，将打包配置指向 dist 目录。

具体配置如下：

// package.json
{
  "scripts": {
    "build:prod": "vue-cli-service build --mode production --config webpack.prod.js",
    "build:dev": "vue-cli-service build --mode development --config webpack.dev.js",
  }
}

// webpack.prod.js
module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
  },
};

// webpack.dev.js
module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
  },
};