vue cli3整合多应用项目

背景

前一段时间接到领导指示去协助别的组一个项目，项目很是复杂，丢过来源码压缩包就有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#/

结束

延伸阅读

• https://cli.vuejs.org/zh/config/#pages