vue项目一体化解决方案一核心篇 - [架构篇]

一、目录规划以及说明

第一步 我们进行目录的规划，目录提前规划，可以让我们知道搭建项目的目的和结果。
主目录文件夹

目录说明：(公共模块的名字最好用_xxx开头，与子目录区分，博主是后来整改了项目，所以名字就没有改)

├─	dist   			 //打包后的输入目录
├─ 	duteDoc		    // 组件文档 ，用于后面集成 vuese 生成组件文档   
├─	public			// 静态目录，用于存放入口index.html文件以及 ico文件
├─	static			// 静态文件，打包时不参与打包编译，不引入时也不打包进入项目包 
（注意：放入public时也不参与打包编译，但是会进入打包后的目录里面，所以需要单独 规划一个静态目录），用于存放一些外部需要单独引入的文件等等
├─	staticProject	// 用于存放一些不需要框架的页面项目，存放一些需要体积小的单独静态页面
（注意：该目录只是用于管理一些零散的静态页面，比如隐私协议，中转页面等），用于存放不需要框架，体积很小的页面，因为用框架打包的页面会带有很多没必要的编译文件，没必要。

├─	src				// 所有的项目文件
	├─	_api		// 存放公共的一些api，只要用于一些公共方法用到的api接口
	├─	_data		// 用于存放公共的一些文件，比如一些公共的json文件，或者说明文件等
	├─	_store		// 用于存放全局公共的store（只做所有项目共有的基础功能，比如登入，用户信息，如果用于做模块分隔隔离，项目是统一的情况，可以用）
	├─	_utils		// 全局的公共方法库
	├─	assets(最好取名字：_assets)		// 全局公共的一些静态文件
	├─	components(最好取名字：_components)	 //全局公共的组件库
	├─	config (最好取名字：_config)			// 一些全局公共的配置，根据需求来，一般配置在子项目里面
	├─	directives	(最好取名字：_directives	)	//	 全局指令
	├─	filters (最好取名字：_filters)			//	全局过滤器
	├─	plugins (最好取名字：_plugins)			// 用于控制公共组件，指令，过滤器，第三方插件的引入，会根据子项目配置文件引入
	├─	project 				//用于存放所有的H5子项目（后面所有的项目都会建立在这个里面）
	├─	projectAdmin			// 这个用于存放所有的后台管理的项目 （需要处理打包时 该目录下面所有的子项目，不进行rem转化）
├─	.env.development			// 	开发环境的基本配置
├─	.env.production				//	生成环境的基本配置
├─	.env.test					//	测试环境的基本配置

二、基本的公共的打包配置

一、 设计多项目和多环境 打包和环境命令

文件： package.json
增加 test 和的打包命令 以及 后台项目的打包命令

  "scripts": {
    "dev": "vue-cli-service serve --mode",
    "test": "vue-cli-service build --mode test",
    "build": "vue-cli-service build --mode production",
    
    "dev-ad": "vue-cli-service serve --mode --ad",
    "test-ad": "vue-cli-service build --mode test --ad",
    "build-ad": "vue-cli-service build --mode production --ad",
  },

增加完成以后，以后打包子项目的时候

1. 为H5前台项目时 ， 运行 npm run dev xxx(子目录名称) , 测试环境和正式环境的打包案列一样
2. 为后台项目时 ，运行 npm run dev-ad xxx(子目录名称) , 测试环境和正式环境的打包案列一样

二、建立模板子项目（为模板）

在project 建立模板子项目 _baseTemplate

这里的模板作为演示，也可以作为以后的初始模板，用于建立的时候进行复制
目录说明：

_baseTemplate		子项目（模块）的名称
	├─	api  			项目的api文件
	├─	assets			静态库
	├─	components  	组件库
	├─	config  		配置文件
		├─ index.js		该项目的自定义动态配置等等 （很重要）
	├─	router  		router文件
	├─	store  			store文件
	├─	views  			页面逻辑
	├─	App.vue				
	├─	main.js			入口文件（必须存在） 和普通的入口文件配置一样
	├─	README.md		子项目的单独说明

main.js

import Vue from 'vue';
import App from './App';
import router from './router/index.js';
import store from './store/index.js';

Vue.config.productionTip = false;

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

三、规划子目录的配置文件（这里先配置基础的，后面随着组件插件的集成，一步一步的添加，主要是思路）

config / index.js (最简单的配置) 

// 最基本的配置，后面可以加入各种自定义的配置，比如开启某个方法，通过名称自定义引入某个组件自动注册，统一分享的信息，插件的启动配置，项目的公共参数配置等等
module.exports.config = {
  publicPath: './',
  outputDir: 'dist/_baseTemplate', // 打包输出名称
  staticConfig: ['js'], //可以将static里面的静态资源 复制到public
  base: {
    //页面访问路径，打包的时候要加，这个应该怎么改应该都不陌生
    development: '/',
    test: '/_baseTemplate',
    production: '/_baseTemplate'
  },
  devServer: {
    open: false, // 自动打开浏览器
    port: 9090,
    https: false,
    proxy: {
      '/xxx': {
        target: 'https://xxxx', //开发
        changeOrigin: true,
        pathRewrite: {
          '^/xxx': ''
        }
      }
    }
  }
};

四、vue.config.js的配置项，实现多项目打包隔离的功能

基本配置
- 实现多项目的启动 和 打包
- 实现出入口文件的自定义配置
- 实现static目录的单独隔离，不参与编译，并不影响打包入其他子项目

const path = require('path');
const webpack = require('webpack');
const CopyPlugin = require('copy-webpack-plugin');
// 获取打包的项目为后台项目还是前台项目
let isPC = process.argv[process.argv.length - 2] === '--ad';
let projects = isPC ? 'projectAdmin' : 'project';

//获取打包目录名称
const projectName = process.argv[process.argv.length - 1];
const projectPath = `src/${projects}/${projectName}`;

//filename 当不同项目需要不同的模板的时候 ，可以使用这个字段，一般情况下都是默认为index.html 不需要加入
const { publicPath, outputDir, devServer, staticConfig, filename } =
  require(`./src/${projects}/${projectName}/config`).config;

function getEntry() {
  var entries = {};
  let template = isPC ? 'public/indexpc.html' : 'public/index.html';
  entries = {
    index: {
      // page的入口
      entry: projectPath + '/main.js',
      // 模板来源
      template: template,
      // 在 dist/index.html 的输出
      filename: filename || 'index.html',
      chunks: [
        'index',
        'chunk-vendors',
        'vue',
        'vuex',
        'vue-router',
        'vant-ui',
        'utils',
        'components'
      ]
    }
  };
  return entries;
}

module.exports = {
  publicPath,
  // 输出文件目录
  outputDir,
  pages: getEntry(),
  configureWebpack: (config) => {
    // 当需要使用static静态资源的时候，在打包的时候复制进入项目
    if (staticConfig && staticConfig.length > 0) {
      let CopyList = [];
      staticConfig.forEach((item) => {
        let Objects = {
          from: `static/${item}`,
          to: `${item}`
        };
        CopyList.push(Objects);
      });
      let CopyPlugins = new CopyPlugin(CopyList);
      config.plugins = [...config.plugins, CopyPlugins];
    }
  },
  //前端代理
  devServer
};

五、运行

前台项目
开发环境运行:
npm run dev _baseTemplate 

测试环境打包：
npm run test _baseTemplate 

生产环境打包：
npm run build _baseTemplate 

后台项目 ( 模板自己建立即可 )
开发环境运行:
npm run dev-ad xxxxx

测试环境打包：
npm run test-ad xxxxx

生产环境打包：
npm run build-ad xxxxx

总结： 这篇实现了最核心的子项目单独隔离的问题，这样可以多个项目集成进入一个项目进行管理，并且带有各自的业务层，打包上传后，出现问题不会影响其他业务模块，或者子项目。主要方法是通过 获取打包命令，以及配置vue.config.js进行多入口多出口的方式进行的。

下一期开始进入项目细节的配置了。包括axios合理封装，组件，指令，自定义主动引入等方面的配置。