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

一、目录规划以及说明

第一步 我们进行目录的规划,目录提前规划,可以让我们知道搭建项目的目的和结果。
主目录文件夹
vue项目一体化解决方案一核心篇 - [架构篇]_第1张图片
目录说明:(公共模块的名字最好用_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
vue项目一体化解决方案一核心篇 - [架构篇]_第2张图片
这里的模板作为演示,也可以作为以后的初始模板,用于建立的时候进行复制
目录说明:

_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合理封装,组件,指令,自定义主动引入等方面的配置。

你可能感兴趣的:(vue.js,javascript,前端)