Vue-cli 3.X 基于多页面应用的 项目集成环境搭建

Vue-cli 3.x 的多页面应用不多说了, 可以直接看官网 https://cli.vuejs.org/zh/config/#pages

多页面应用简单理解就是: 一个项目有多个入口,只要输入不同的入口地址即可.
一般应用于 css 换肤, 管理系统的 前端展示 和 后台管理 等 应用场景.
目的是为了一些公用资源(css,js,组件等)高效利用, 更利于项目的维护 及 开发效率.

下面我们来具体看一下怎么配置

我们的集成环境搭建其实就是一个多页面应用, 只不过是每次只动态 运行 / 打包 一个 项目
这样即可以集成多个项目,又可以充分利用公共资源,且项目只有一个入口,
如同普通单页面程序一样(建议先去了解一下多页面应用,以便更好理解此环境的搭建)

第一步.创建一个 vue-cli 3.x 的项目

详细的步骤可参考 https://www.jianshu.com/p/d3343762a770

第二步.在 src 文件夹下创建多个项目

image

如上图, src 下本应是 assets compontents app.vue main.js 等文件,
现在我们在 src 下创建了多个项目,每个项目包含了原src下所有的文件及文件夹

**注意: 每个项目的 main.js 的名称不能一样, 一般就是 项目名称_main.js , **如 proj1_main.js

第三步.在项目根目录创建 vue.config.js 文件 并 配置

(1).增加函数, 动态 配置 入口文件

class MultiModule {
  constructor (name) {
    let tmpObj = {};
    name.indexOf('_') > -1 ? name = name.split('_')[0] : '';
    tmpObj[name] = {
        // page 的入口
        entry: `src/${name}/${name}_main.js`,
        // 模板来源
        template: 'public/index.html',
        // 在 dist/index.html 的输出
        filename: 'index.html'
     }
    Object.assign(this,tmpObj)
  }
}

(2).配置动态地址配置

// npm 指令的 类型 serve / build
let ENV_scripts = process.env.npm_lifecycle_script,
    NPM_TYPE = ENV_scripts.split(' --mode ')[1];
process.env.VUE_APP_NPM_TYPE = NPM_TYPE;
process.env.NODE_ENV = ENV_scripts.indexOf(' serve ') > -1 ? "development":"production"
process.env.VUE_APP_PUBLICPATH = '/'

// 不同环境的 地址配置
if(NPM_TYPE == 'proj1'){
    process.env.VUE_APP_PROJ_NAME = 'proj1'
    process.env.VUE_APP_HTTP_URL = 'http://xx.xx.xx.xx:8888/'
}else if(NPM_TYPE == 'proj2'){
    process.env.VUE_APP_PROJ_NAME = 'proj2'
    process.env.VUE_APP_HTTP_URL = 'http://xx.xx.xx.xx:8888/'
    process.env.VUE_APP_PUBLICPATH = '/proj2/'
}

(3).导出配置文件(参考)

require('./tools/getUrls.js')
const chalk = require('chalk')
const path = require('path')

function resolve (dir) {
    return path.join(__dirname, dir)
}
function getProxyInfo(){
    let tmpObj = {}, tmpPathRewrite = {},
    tmpKey = 'api';
    tmpPathRewrite['^/' + tmpKey] = '/';
    tmpObj['/'+tmpKey] = {
        target: process.env.VUE_APP_HTTP_URL,
        changeOrigin: true, //是否跨域
        pathRewrite: tmpPathRewrite
    }
    return tmpObj;
}
const pages = new MultiModule( process.env.VUE_APP_PROJ_NAME )
module.exports = {
    pages: pages,
    // 没有书写outputDir属性   默认'dist'  对应dev.assetsSubDirectory
    outputDir: 'dist',
    // compiler: false,
    //在vue-cli.3.3版本后 baseUrl被废除了，因此这边要写成 publicPath ( 资源地址 )
    publicPath: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_PUBLICPATH : '/' , 
    lintOnSave: false,
    runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
    productionSourceMap: false, // 生产环境的 source map
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {}
        // 启用 CSS modules for all css / pre-processor files.
        // modules: false
    },
    // 运行配置
    devServer: { 
        // host: '127.0.0.1',
        port: '8866', //代理端口
        open: false, //项目启动时是否自动打开浏览器，我这里设置为false,不打开，true表示打开
        // https: false,
        // hotOnly: false,
        // disableHostCheck: true,
        proxy: getProxyInfo(),
        disableHostCheck: true //webpack4.0 开启热更新
    },
    chainWebpack: config => {
        // 提示输出的哪个地址
        console.log(chalk.blueBright('\n\n running ' + process.env.VUE_APP_PROJ_NAME + ' : ') + 
            chalk.yellowBright(process.env.VUE_APP_HTTP_URL + ' please wait... \n'));
        // 修复HMR(热更新)失效
        config.resolve.symlinks(true),
        //set第一个参数：设置的别名，第二个参数：设置的路径
        config.resolve.alias
        .set('@',resolve('./src/'+process.env.VUE_APP_PROJ_NAME))
        .set('components',resolve('./src/common/components'))
        .set('assets',resolve('./src/common/assets'))
        //.set('views',resolve('./src/views'))
        //注意 store 和 router 没必要配置
    },
    //webpack配置
    configureWebpack:  {
        //关闭 webpack 的性能提示
        // performance: {
        //     hints:false
        // },
        //或者
        performance: {
            hints:'warning',
            //入口起点的最大体积
            maxEntrypointSize: 50000000,
            //生成文件的最大体积
            maxAssetSize: 30000000,
            //只给出 js 文件的性能提示
            assetFilter: function(assetFilename) {
                return assetFilename.endsWith('.js');
            }
        }
    }
}

第四步.或配置不同项目的启动地址(不启用动态地址配置)

在根目录创建 .env.proj1, .env.proj2, .env.proj3, .env.proj4 文件

image

.env.proj1 为例, 文件内容如下:
NODE_ENV = "production"
VUE_APP_PROJ_NAME = 'proj1'
VUE_APP_HTTP_URL = 'http://xx.xx.xx.xx'

第五步.配置 package.json 文件 启动 / 打包 不同项目

**"scripts": {**         "serve": "vue-cli-service serve",
    "serve:proj1": "vue-cli-service serve --mode proj1",
    "serve:proj2": "vue-cli-service serve --mode proj2",
    "serve:proj3": "vue-cli-service serve --mode proj3",
    "serve:proj4": "vue-cli-service serve --mode proj4",
    "build": "vue-cli-service build",
    "build:proj1": "vue-cli-service build --mode proj1",
    "build:proj2": "vue-cli-service build --mode proj2",
    "build:proj3": "vue-cli-service build --mode proj3",
    "build:proj4": "vue-cli-service build --mode proj4",
    "lint": "vue-cli-service lint"
}

第六步.控制输入不同命令 启动 / 打包 不同项目

npm run serve:proj1
npm run serve:proj2
npm run serve:proj3
npm run serve:proj4

npm run build:proj1
npm run build:proj2
npm run build:proj3
npm run build:proj4