Vue-Cli3 项目优化: 共用配置和组件打包指南

2023-09-27 15:28:05

在实际项目开发中，我们经常会遇到多个项目共用某些配置和组件的情况，但又不想完全合并在一起。为了解决这个问题，本文将介绍如何在 Vue-Cli3 项目中实现多项目共用配置和组件动态打包，以便提高开发效率和项目维护的便捷性。

1. 多项目共用配置

首先，我们需要将需要共享的配置提取出来，放置在一个单独的文件中，例如 shared-config.js。然后，在各个项目中引入这个文件，并将其作为配置的一部分。这样，当我们修改共享配置时，只需要修改 shared-config.js 文件，而无需修改每个项目中的配置。

例如，我们可以将以下配置提取到 shared-config.js 文件中：

module.exports = {
  // 公共的配置
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "@/assets/scss/main.scss";`,
      },
    },
  },
};

然后，在各个项目中引入 shared-config.js 文件，并在 vue.config.js 文件中将其作为配置的一部分。例如：

const sharedConfig = require('./shared-config.js');

module.exports = {
  ...sharedConfig,
  // 项目特定的配置
  lintOnSave: false,
};

2. 组件动态打包

为了实现组件动态打包，我们需要创建一个新的命令来控制打包过程。在 package.json 文件中，添加以下命令：

{
  "scripts": {
    "build:shared": "vue-cli-service build --target lib --name shared ./components",
    "build:app1": "vue-cli-service build ./app1",
    "build:app2": "vue-cli-service build ./app2"
  }
}