项目打包

刘欢2024/11/25原创大约 3 分钟约 971 字

1. Vue 大型项目之分模块运行 / 打包

1.1. 创建 projects 目录

分模块打包，那么各个模块内就必须得有自己独立的入口文件，路由文件。按照这种构想，需要在一个新的脚手架 src 目录下新建了一个 projects 目录： alt text

如上图，可以看到 Bproject、mcHd 两个项目。可以在每个小项目中创建 assets（包括 img 和 css）、common（放公共组件或者方法）、views（放页面）的文件夹和 mApp.vue、main.js、router.js、store.js（小项目中的路由之类）如果还需要文件夹专门用来放组件可以建一个 components 文件夹。（本项目比较小暂时不需要） alt text 视图目录结构大概就是上面的样子，我们可以打包这个 mcHd 模块这个小项目下的页面，就像打包一个完整 vue 的项目一样

1.2. 更改 vue.config.js 文件

在项目最外层建立 config 文件夹，在其中新建 projectsConfig.js 写入：

const config = {
  mcHd: {
    pages: {
      index: {
        entry: "src/projects/mcHd/main.js",
        template: "public/index.html",
        filename: "index.html"
      }
    },
    devServer: {
      port: 8080, // 端口号
      host: "0.0.0.0",
      https: false, // https:{type:Boolean}
      open: false, //配置自动启动浏览器
      disableHostCheck: true,
      // 设置代理
      proxy: {
        "/": {
          target: "根据自己情况填写,
          changeOrigin: true,
          ws: false
        }
      }
    }
  },
  projectB: {
    pages: {
      index: {
        entry: "src/projects/Bproject/main.js",
        template: "public/index.html",
        filename: "index.html"
      }
    },
    devServer: {
      port: 8080, // 端口号
      host: '0.0.0.0',
      https: false, // https:{type:Boolean}
      open: false, //配置自动启动浏览器
      disableHostCheck: true,
      // 设置代理
      proxy: {
        "/": {
          target: "根据自己情况填写",
          changeOrigin: true,
          ws: false
        }
      }
    }
  },
};
module.exports = config;

然后在 vue.config.js 中代码如下

const config = require("./config/projectsConfig.js");
let projectName = process.env.PROJECT_NAME;

module.exports = {
  ...config[projectName],
  // pages: conf.pages,

  // 基本路径
  // baseUrl: './',//vue-cli3.3以下版本使用
  publicPath: "./", // vue-cli3.3+新版本使用

  // 输出文件目录
  outputDir: "dist/" + projectName + "/"
};

1.3. 打包单个模块

在本项目中的 package.json 文件，有项目启动，打包的命令。可以在这配置每个项目的启动，打包命令正常单个项目的文件是这样子的 alt text 那我们需要需要做的就是不同项目有不同的 serve、build 这里需要用到 cross-env 这个模块 下载插件命令：npm install --save-dev cross-env 当我们执行打包命令的时候，通过 cross-env 去找到我们的入口文件，然后再进行打包。

所以我们可以模仿环境变量的写法，就可以设置每个项目的打包命令了。代码如下

 "scripts": {
    "serve:mcHd": "cross-env PROJECT_NAME=mcHd vue-cli-service serve",
    "serve:projectB": "cross-env PROJECT_NAME=projectB vue-cli-service serve",
    "build:mcHd": "cross-env PROJECT_NAME=mcHd vue-cli-service build",
    "build:projectB": "cross-env PROJECT_NAME=projectB vue-cli-service build",
    "uat": "vue-cli-service build --mode uat",
    "pro": "vue-cli-service build --mode pro",
    "lint": "vue-cli-service lint"
  },

这样每次想要启动哪个项目就可以输入哪个项目的命令啦列如：npm run serve:mcHd 这样就实现了上图 mcHd 这个文件的页面的单独启动，也就实现了分模块打包。下面贴一个 mcHd 页面文件的内容，可做参考在 App.vue 中配置如下代码：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style lang="scss"></style>

在 main.js 中配置如下代码：下面的 scss 是一个公共文件样式具体根据自己来定

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./assets/css/reset.scss";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

在 router.js 中配置如下代码

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    }
  ]
});

store.js 我这里没用到为空

home.vue 页面

<template>
  <div>
    11111
  </div>
</template>

<script>
export default {};
</script>

<style></style>