vue cli3整合多应用项目背景前一段时间接到领导指示去协助别的组一个项目，项目很是复杂，丢过来源码压缩包就有144

背景

前一段时间接到领导指示去协助别的组一个项目，项目很是复杂，丢过来源码压缩包就有144M，项目中包含纯h5项目, 小型vue项目，这些页面互相之间没有什么关联，有一个首页链接到每一个小应用中，同时，有很多共同的依赖包，需求是能整合到一个项目中方便后续开发。考虑到业务代码太庞大，我自己对业务代码不太熟悉，万一调整太多遭到半路堵截，思虑再三，不过好在cli3版本增加了pages属性，配置起来相当轻松。

开始

第一步首先 vue create app 初始化名为 app 的项目

第二步把目录结构调整成

├── public/                     # 放置纯静态项目
│   └── ...
├── src/                        # 项目代码入口
│   │
│   ├── components              # 多个项目共享的组件
│   ├── utils                   # 多个项目共享的工具库
│   ├── assets                  # 多个项目共享的静态资源
│   │
│   └── pages                   # 多个项目页面划分
│       ├── index/              # 首页项目
│       │   ├── views           # 页面
│       │   ├── router.js       # 路由文件
│       │   ├── index.js        # 页面/应用入口文件
│       │   ├── app.vue
│       │   ├── index.html
│       │   └── ...
│       ├── page1/              # 模块小应用
│       │   ├── assets          
│       │   ├── components      # 该页面/应用自身的组件
│       │   ├── store           # 
│       │   ├── router          # 路由文件
│       │   ├── utils           # 该页面/应用自身的工具库
│       │   ├── index.js        # 页面/应用入口文件
│       │   ├── app.vue
│       │   ├── index.html
│       │   └── ...
│       └── page2/              # 第二个页面或者应用
│       │   ├── index.js        # 页面/应用入口文件
│       │   └── ...
│       └── pageN/              # 第N个页面或者应用
│           ├── index.js        # 页面/应用入口文件
│           └── ...
├── build/                      # 项目打包代码
│   ├── .../                    # public静态项目
│   ├── page1/                  # 第一个页面或者应用
│   │   ├── [hash].js
│   │   └── index.html          # 页面/应用入口文件
│   ├── page2/                  # 第二个页面或者应用
│   │   ├── [hash].js
│   │   └── index.html          # 页面/应用入口文件
│   └── pageN/                  # 第N个页面或者应用
│       ├── [hash].js
│       └── index.html          # 页面/应用入口文件
├── babel.config.js             # babel编译参数
├── postcss.config.js
├── vue.config.js
├── .browserslistrc
├── .eslintrc.js
├── .gitignore
└── package.json                # 项目文件，记载着一些命令和依赖还有简要的项目描述信息, 还有共同的依赖包

文件解析

package.json

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.6.10",
    "vuex": "^3.0.1",
    "vue-router": "^3.0.3",
    "vux": "^2.9.2",
    "axios": "^0.24.0",
    "reqwest": "^2.0.5",
    "vant": "^2.12.33",
    "mint-ui": "^2.2.13",
    "dragula": "^3.7.2",
    "fastclick": "^1.0.6",
    "fundebug-javascript": "^1.6.0",
    "fundebug-vue": "0.0.1",
    "amfe-flexible": "^2.2.1",
    "core-js": "^2.6.5"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.5.0",
    "@vue/cli-plugin-eslint": "^3.5.0",
    "@vue/cli-service": "^3.5.0",
    "@vue/eslint-config-prettier": "^5.0.0",
    "autoprefixer": "^9.7.2",
    "babel-eslint": "^10.0.1",
    "babel-plugin-import": "^1.13.5",
    "eslint": "^5.16.0",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-vue": "^5.0.0",
    "glob": "^7.1.4",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "node-sass": "^4.13.0",
    "postcss-pxtorem": "^4.0.1",
    "prettier": "^1.18.2",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.5.21",
    "@vux/loader": "^2.0.0-rc4"
  }
}

vue.config.js

const glob = require("glob");
// const autoprefixer = require("autoprefixer");
// const pxtorem = require("postcss-pxtorem");
const path = require("path");
// const vuxLoader = require("vux-loader");

function getEntry(url) {
  let entrys = {};
  glob.sync(url).forEach(item => {
    // splice(-3)取数组后三项
    let urlArr = item.split("/").splice(-3);
    entrys[urlArr[1]] = {
      entry: "src/pages/" + urlArr[1] + "/" + "index.js",
      template: "src/pages/" + urlArr[1] + "/" + "index.html",
      filename: urlArr[1] + ".html",
      title: "pages-" + urlArr[1]
    };
  });
  return entrys;
}
let pages = getEntry("./src/pages/**?/*.html");
module.exports = {
  lintOnSave: false,
  pages,
  devServer: {
    proxy: {
      "/": {
        target: ""
      }
    }
  },

  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            "text-color": "#111",
            "border-color": "#eee",
            hack: `true; @import "${path.join(
              __dirname,
              "/src/pages/search/style/reset.less"
            )}";`
          }
        }
      }
      // postcss: {
      //   plugins: [
      //     // autoprefixer(),
      //     pxtorem({
      //       // rootValue: 37.5, //设置根元素为37.5px
      //       propList: ["*"]
      //     })
      //   ]
      // }
    }
  },
  configureWebpack: config => {
    require("@vux/loader").merge(config, {
      plugins: ["vux-ui"]
    });
  }
};

babel.config.js

module.exports = {
  presets: ["@vue/app"],
  plugins: [
    [
      "import",
      {
        libraryName: "vant",
        libraryDirectory: "es",
        style: name => `${name}/style/less`
      },
      "vant"
    ]
  ]
};

运行和构建

安装：yarn
运行: yarn dev，网页输入 http:localhost:8080
打包: yarn build

重新启动项目，访问下面两个地址即可看到多页面的效果。

http://localhost:8080/project1#/

http://localhost:8080/project2#/

vue cli3整合多应用项目

背景

开始

文件解析

运行和构建

结束

延伸阅读