1. Toy模板网首页
  2. > Toy博客

vue前端项目集成emp

9月前 作者：营赢盈英 分类：Toy博客 阅读(36) 违法举报

这篇具有很好参考价值的文章主要介绍了vue前端项目集成emp。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

背景

公司有多个产品线的项目，每个项目的功能有重叠的部分，平时开发维护量大，所以考虑将共性的功能抽取出单独的base项目，其它前端项目引用base项目的公共页面，达到提高工作效率的目的。

1. 整合步骤

1.1. 创建文件emp-config.js

1.2. 将文件vue.config.js中的内容拷贝到emp-config.js并根据emp 的框架的要求调整

const FileManagerPlugin = require('filemanager-webpack-plugin');
const vue2 = require('@efox/plugin-vue-2')
const {defineConfig} = require('@efox/emp')
const {cdn} = require('./cdn')
const esm = (name, mode, version) =>
    `https://esm.sh/${name}${version ? '@' + version : ''}${mode === 'development'
        ? '?dev' : ''}`
const packageName = 'dist';
var IS_PROD = (process.env.NODE_ENV == 'CLUSTER') ? true:false
console.log("|"+process.env.NODE_ENV+"|")
console.log(IS_PROD ? '注意：当前是生产环境！！！' : '开发或测试模式')
module.exports = defineConfig(config => {
    const{mode, env} = config
// const target = 'es2018'
    const target = 'es5'
    const isESM = !['es3', 'es5'].includes(target)
    return {
        plugins: [vue2],
        appEntry: 'main.js',
        server: {port: 9003},
        html: {
            title: 'EMP Vue2 Base',
            favicon: 'src/logo.png',
            template: 'src/index.html'
        },
        build: {
            target,
//是否清空生成文件夹
            emptyOutDir: true,
//生产 环境：打包时不生成.map文件，设置为false 避免看到源码
            sourcemap: !IS_PROD,
// + 类型 `boolean` | `swc`
// + 默认 `true`
// 启用 `swc` 进行压缩 比 `terser` 速度提升 7倍,目前处于 `RC` 阶段，可以正常使用
            minify: true,
            outDir: 'dist'
        },
        debug:{
            clearLog: true,
            progress: true,
            profile: false,
            level: 'info'
        },
        empShare: {
            name: 'wsqgovViewUi',
            exposes: {
                './commonLess':'./src/styles/common.less',
                './tableCommonLess':'./src/styles/table-common.less',
                './treeCommonLess':'./src/styles/tree-common.less',
                './wsqHomeLess':'./src/styles/wsqhome.less',
                './axiosJs':'./src/libs/axios',
                './rtIndexJs':'./src/router/index',
                './rtRouterJs':'./src/router/router',
                './indexJs':'./src/api/index',
                './storeModAppJs':'./src/store/modules/app',
                './storeModDictJs':'./src/store/modules/dict',
                './storeModUserJs':'./src/store/modules/user',
                './storeIndexJs':'./src/store/index',
                './indexBackJs':'./src/api/indexBack',
            },
// shared: {
// vue: {requiredVersion: '^2.6.14'},
// 'element-ui': {requiredVersion: '^2.0.0'},
// 'vue-router': {requiredVersion: '^3.0.0'},
// 'view-design' :{requiredVersion:'^4.4.0'}
// },
            shareLib: !isESM
                ? cdn(mode)
                :
                {
                    vue: esm('vue',mode,'2.6.14'),
// 'element-ui': esm('element-ui'),
                    'view-design': esm('view-design',mode,'4.7.0')
                },
        },
        "resolve":{
            "alias": {
                "@": "src"
            },
        },
// webpack配置
        webpackChain: (chain, config) => {
            if (process.env.NODE_ENV == 'production'
                || 'buildTest' == process.env.NODE_ENV
                || 'CLUSTER' == process.env.NODE_ENV
            ) {
// 增加zip打包插件
                chain.plugin('FileManagerPlugin').use(
                    new FileManagerPlugin({
                        events: {
                            onEnd: {
                                delete: [ //首先需要删除项目根目录下的dist.zip
                                    `./${packageName}.zip`
                                ],
                                archive: [ //然后我们选择dist文件夹将之打包成dist.zip并放在根目录
                                    {source: `./${packageName}`, destination:
                                            `./${packageName}.zip`, format: 'zip'},
                                ]
                            }
                        }
                    })
                )
///
            }
        },
        optimization: {
//webpack不自动读取配置文件中的mode给process.env.NODE_ENV赋值
            nodeEnv: false
        }
/
    }
})

1.3. 将 public/index.html 移动到 src/index.html 将 public/logo.png 移动到 src/logo.png，修改引用logo.png文件的代码

1.4. 在src/index.html文件中注入emp shareLib 以CDN方式引入 的css与js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
    <link rel="icon" href="src/logo.png">
    <title>智慧社区管理平台</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <!-- EMP inject css-->
    <% for (let i in htmlWebpackPlugin.options.files.css) { %>
    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.files.css[i] %>"
    /><% } %>
    <!-- EMP inject js -->
    <% for (let i in htmlWebpackPlugin.options.files.js) { %>
    <script src="<%= htmlWebpackPlugin.options.files.js[i] %>"></script><% } %>
    <!-- 部署CDN优化 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/vue-i18n@8.15.1/dist/vuei18n.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vuerouter.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js">
    </script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/viewdesign@4.2.0/dist/styles/iview.css">
    ......

1.5. 删除文件 vue.config.js

1.6. 新建文件src/bootstrap.js

1.7. 将src/main.js文件内容复制到src/bootstrap.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
//import '@babel/polyfill'
import 'core-js'
import 'regenerator-runtime/runtime'
import Vue from 'vue'
import Vuex from 'vuex'
import ViewUI from 'view-design'
// import VueCompositionAPI from '@vue/composition-api'
// import { install } from 'vue-demi'
// import 'view-design/dist/styles/iview.css'
import '@/assets/font/iconfont.css' //2021-4-14新的主页 引入自定义图标
import App from './App'
import { router } from '@/router/index'
import VueRouter from 'vue-router'
import store from '@/store'
import i18n from '@/locale'
import Icon from 'vue-awesome/components/Icon'
// 按需引入awesome图标
import 'vue-awesome/icons/brands/qq'
import 'vue-awesome/icons/brands/weixin'
import 'vue-awesome/icons/brands/weibo'
import 'vue-awesome/icons/brands/github'
// 引入theme 样式
import '@/styles/theme/color.less'
import conf from '@/config/config.js';
import { getRequest, postRequest, putRequest, postBodyRequest, getNoAuthRequest,
    postNoAuthRequest } from '@/libs/axios'
import { setStore, getStore, removeStore } from '@/libs/storage'
import { format } from "date-fns";
import util from '@/libs/util'
import dictUtil from '@/libs/dictUtil'
import hasPermission from '@/libs/hasPermission'
import hasRole from '@/libs/hasRole'
import iviewArea from '@/views/my-components/iview-area';
import VueLazyload from 'vue-lazyload'
import VueClipboard from 'vue-clipboard2'
import VueApexCharts from 'vue-apexcharts'
import echarts from 'echarts' //引入echarts
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false
Vue.use(VueLazyload, {
    error: require('./assets/img-error.png'),
    loading: require('./assets/loading2.gif')
})
Vue.use(ViewUI, {
    i18n: (key, value) => i18n.t(key, value)
});
import AMapLoader from '@amap/amap-jsapi-loader';
// import htmlToPdf from './views/wsqcomp/education/htmlToPdf'
// Vue.use(htmlToPdf)
Vue.use(AMapLoader)
Vue.use(Vuex)
Vue.use(VueRouter)
// Vue.use(VueCompositionAPI)
Vue.component('icon', Icon);
Vue.use(VueClipboard);
Vue.use(hasPermission);
Vue.use(hasRole);
Vue.use(iviewArea);
Vue.use(VueApexCharts);
Vue.component('apexchart', VueApexCharts);
// 挂载全局使用的方法
Vue.prototype.getRequest = getRequest;
Vue.prototype.postRequest = postRequest;
Vue.prototype.putRequest = putRequest;
Vue.prototype.postBodyRequest = postBodyRequest;
Vue.prototype.getNoAuthRequest = getNoAuthRequest;
Vue.prototype.postNoAuthRequest = postNoAuthRequest;
Vue.prototype.setStore = setStore;
Vue.prototype.getStore = getStore;
Vue.prototype.removeStore = removeStore;
Vue.prototype.format = format;
// Vue.prototype.$api = api;
Vue.prototype.$conf = conf;//全局可通过 this.$conf 访问 配置
// import ECharts from 'vue-echarts'
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    store,
    i18n,
    render: h => h(App),
    data: {
        currentPageName: ''
    },
    mounted() {
        this.$Message.config({
            duration: 3
        })
// 初始化菜单
        util.initRouter(this);
// 初始化全局数据字典
        dictUtil.initDictData(this);
        this.currentPageName = this.$route.name;
// 显示打开的页面的列表
        this.$store.commit('setOpenedList');
        this.$store.commit('initCachepage');
    }
})
import wangEditor from 'wangeditor'
import DPlayer from 'dplayer'
// import JsPDF from 'jspdf'
import axios from 'axios'
// import Viewer from 'viewerjs'
import XLSX from 'xlsx'
// import CountUp from 'countup.js'
// import echarts from 'echarts'
import Cookies from 'js-cookie'
import printJS from 'print-js'
// import Quill from 'quill'
import SockJS from 'sockjs-client'
import VueI18n from 'vue-i18n'
import vueSeamlessScroll from 'vue-seamless-scroll'
import vuedraggable from 'vuedraggable'
Vue.use(wangEditor)
// Vue.use(ECharts)
Vue.use(DPlayer)
// Vue.use(JsPDF)
Vue.use(axios)
// Vue.use(Viewer)
Vue.use(XLSX)
// Vue.use(echarts)
// Vue.use(CountUp)
Vue.use(Cookies)
Vue.use(printJS)
// Vue.use(Quill)
Vue.use(SockJS)
Vue.use(VueI18n)
Vue.use(vuedraggable)

1.8. 修改src/main.js文件内容

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
//import '@babel/polyfill'
import('./bootstrap.js')

1.9. 在package.json中添加emp相关依赖

添加@efox开头的依赖

删除以下依赖

@vue/cli-service

@vue/cli-plugin-babel

less

less-loader

"devDependencies": {
"@efox/emp": "^2.4.3",
"@efox/eslint-config-vue": "^2.0.1",
"@efox/plugin-vue-2": "^1.1.2",
"@types/node": "^18.6.3",
"@vue/cli-plugin-router": "^4.1.0",
"@vue/cli-plugin-vuex": "^4.1.0",
"compression-webpack-plugin": "^3.0.0",
"cross-env": "^7.0.3",
"exports-loader": "^1.1.0",
"filemanager-webpack-plugin": "^3.1.1",
"imports-loader": "^1.1.0",
"luckyexcel": "^1.0.1",
"three": "^0.118.3",
"vue-template-compiler": "^2.6.10",
"webpack": "^5.74.0"
}

1.10. 将第三方组件以cdn方式引入

1.10.1. 新建 /cdn.js

const envLib = {
development: {
'vue': 'Vue@https://www.wsq666.com/datapublic/cdn/vue@2.6.14/dist/vue.min.js',
'view-design': [
'iview@https://www.wsq666.com/data-public/cdn/viewdesign@4.7.0/dist/iview.min.js',
`https://www.wsq666.com/data-public/cdn/viewdesign@4.7.0/dist/iview.css`,
'zhCnLocale@https://www.wsq666.com/data-public/cdn/viewdesign@4.7.0/dist/locale/zh-CN.js',
'enUsLocale@https://www.wsq666.com/data-public/cdn/viewdesign@4.7.0/dist/locale/en-US.js'
],
'stompjs':'Stomp@https://cdn.bootcdn.net/ajax/libs/stomp.js/2.1.0-
next/stomp.js',
'html2canvas':'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2ca
nvas.min.js',
'vuex':'Vuex@https://unpkg.com/vuex@3.1.2/dist/vuex.js',
vue-router':'VueRouter@https://unpkg.com/vue-router@3.3.1/dist/vuerouter.js',
// 'vue-echarts':'ECharts@https://lf6-cdn-tos.bytecdntp.com/cdn/expire1-M/vue-echarts/6.0.0-rc.5/index.umd.js',
'wangeditor':'wangEditor@https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-
M/wangEditor/3.1.1/wangEditor.min.js',
'dplayer':'DPlayer@https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-
M/dplayer/1.25.1/DPlayer.min.js',
// 'jspdf':'JsPDF@https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-
M/jspdf/2.5.0/jspdf.umd.min.js',
'axios':'axios@https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-
M/axios/0.19.2/axios.min.js',
/* 'viewerjs':[
'Viewer@https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-
M/viewerjs/1.5.0/viewer.min.js',
`https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-
M/viewerjs/1.10.4/viewer.css`
], */
'xlsx':'XLSX@https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-
M/xlsx/0.15.1/xlsx.min.js',
// 'echarts':'echarts@https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-
M/echarts/4.9.0-rc.1/echarts.min.js',
// 'countup.js':'CountUp@https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-
M/countup.js/2.0.4/countUp.min.js',
'js-cookie':'Cookies@https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-
M/js-cookie/2.2.1/js.cookie.min.js',
'core-js':'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/corejs/3.5.0/minified.min.js',
'print-js':'printJS@https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-
M/print-js/1.0.63/print.min.js',
/* 'quill':[
'Quill@https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-
M/quill/1.3.7/quill.min.js',
`https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-
M/quill/1.3.7/quill.snow.css`
], */
'sockjs-client':'SockJS@https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-
M/sockjs-client/1.4.0/sockjs.min.js',
'videojs-contrib-hls':'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-
M/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js',
'vue-clipboard2':'VueClipboard@https://lf26-cdntos.bytecdntp.com/cdn/expire-1-M/vue-clipboard2/0.3.0/vue-clipboard.min.js',
'vue-i18n':'VueI18n@https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-
M/vue-i18n/8.15.1/vue-i18n.min.js',
'vue-lazyload':'VueLazyload@https://lf9-cdntos.bytecdntp.com/cdn/expire-1-M/vue-lazyload/1.3.3/vue-lazyload.js',
'vue-seamlessscroll':'vueSeamlessScroll@https://cdn.jsdelivr.net/npm/vue-seamlessscroll@latest/dist/vue-seamless-scroll.min.js',
'vuedraggable':'vuedraggable@https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggab
le/2.23.2/vuedraggable.umd.min.js',
},
production: {
},
}
const lib = {
// 'react-router-dom': 'ReactRouterDOM@https://cdn.jsdelivr.net/npm/reactrouter-dom@5.3.0/umd/react-router-dom.min.js',
}
module.exports = {
cdn: mode => {
return {
...envLib[mode],
// ...lib,
}
},
}

1.10.2. 在 emp-config.js 中引入cdn.js

......
const {cdn} = require('./cdn')
......
shareLib: !isESM
? cdn(mode)
:
{
vue: esm('vue',mode,'2.6.14'),
// 'element-ui': esm('element-ui'),
'view-design': esm('view-design',mode,'4.7.0')
},
......

1.10.3. 在 src/bootstrap.js 中引入通过CDN方式注入的组件

......
import SockJS from 'sockjs-client'
Vue.use(SockJS)
......

1.11. emp项目启动

yarn dev

emp dev

1.12. 引用其它项目的样式文件

wsqcomp前端项目引用wsqgov政府端前端的样式方式

将wsqcmop集成emp框架

将wsqgov项目的样式文件通过 empShare 的方式暴露出去

以 /src/styles/common.less 为例

/emp-config.js

......
empShare: {
name: 'wsqgovViewUi',
exposes: {
'./commonLess':'./src/styles/common.less',
'./tableCommonLess':'./src/styles/table-common.less',
'./treeCommonLess':'./src/styles/tree-common.less',
'./wsqHomeLess':'./src/styles/wsqhome.less',
'./axiosJs':'./src/libs/axios',
'./rtIndexJs':'./src/router/index',
'./rtRouterJs':'./src/router/router',
'./indexJs':'./src/api/index',
'./storeModAppJs':'./src/store/modules/app',
'./storeModDictJs':'./src/store/modules/dict',
'./storeModUserJs':'./src/store/modules/user',
'./storeIndexJs':'./src/store/index',
'./indexBackJs':'./src/api/indexBack',
},
......

wsqcomp项目中通过 remotes 方式引用 wsqgov 暴露的组件

emp-config.js

......
empShare: {
name: 'wsqcompViewUi',
remotes: {
'@govViewUi': 'wsqgovViewUi@http://192.168.124.66:9003/emp.js',
},
......

修改wsqcomp项目中引用样式文件的方式

\src\views\home\home.vue

import commonLess from '@govViewUi/commonLess';

<style lang="less">
@import "./home.less";
// @import "../../styles/common.less";
</style>
<template>
  <div>
    <div v-show="currNav=='home'" class="home">
      <dashboard2 />
    </div>
  </div>
</template>
<script>
// import wsqHomeLess from '@govViewUi/wsqHomeLess';
import commonLess from '@govViewUi/commonLess';
import { ipInfo, getNotice } from "@/api/index";
// import axiosJs from '@govViewUi/axiosJs';
//import rtIndexJs from '@govViewUi/rtIndexJs';
//import indexBackJs from '@govViewUi/indexBackJs';
import visitVolume from "./components/visitVolume.vue";
import visitSeparation from "./components/visitSeparation.vue";
import infoCard from "./components/infoCard.vue";
import show from "./show.vue";
import dashboard2 from "../kr-charts/dashboard2/dashboard2.vue";
import Cookies from "js-cookie";
import "gitalk/dist/gitalk.css";
import Gitalk from "gitalk";
......

1.13. 导出公用函数 wsqcomp

引用 wsqgov 暴露的公用函数

需要导出的函数中，若包含多个 export const 函数，需要修改成通过 export default 导出 测试文件 \src\api\indexBack.js

// 统一请求路径前缀在libs/axios.js中修改
import {
getRequest,
getNoAuthRequest
} from '@/libs/axios';
import conf from '@/config/config.js';
export const indexBackJs = {
vaptchaID: "121133243434343434",
uploadFile: conf.baseUrl + "/upload/file",
uploadFilePh: conf.baseUrlPh + "/upload/file",
uploadFileWyc: conf.baseUrlWyc + "/upload/file",
uploadFileKy: conf.baseUrlKy + "/upload/file",
drawCodeImage: conf.baseUrl + "/common/captcha/draw/",
getMenuList: conf.baseUrl + "/permission/getMenuList",
getDictData: conf.baseUrl + "/dictData/getByType/",
ws: conf.baseWs, // "http://127.0.0.1:4888/wsqcomp_system/ws"
// IP天气信息
ipInfo(params) {
return getRequest('/common/ip/info', params)
},
// 获取公告
getNotice(params) {
return getNoAuthRequest('/setting/notice', params)
}
}
export default indexBackJs

wsqgov 项目在 /emp-config.js 文件中暴露出公用函数文件

以 /src/api/indexBack.js 文件为例

......
empShare: {
name: 'wsqgovViewUi',
exposes: {
'./commonLess':'./src/styles/common.less',
'./tableCommonLess':'./src/styles/table-common.less',
'./treeCommonLess':'./src/styles/tree-common.less',
'./wsqHomeLess':'./src/styles/wsqhome.less',
'./axiosJs':'./src/libs/axios',
'./rtIndexJs':'./src/router/index',
'./rtRouterJs':'./src/router/router',
'./indexJs':'./src/api/index',
'./storeModAppJs':'./src/store/modules/app',
'./storeModDictJs':'./src/store/modules/dict',
'./storeModUserJs':'./src/store/modules/user',
'./storeIndexJs':'./src/store/index',
'./indexBackJs':'./src/api/indexBack',
},
......

wsqcomp 项目在 emp-config.js 中通过 empShare 的 remotes 属性 引用 wsqgov 项目暴露的公 用函数

......
empShare: {
name: 'wsqcompViewUi',
remotes: {
'@govViewUi': 'wsqgovViewUi@http://192.168.124.66:9003/emp.js',
},
......

wsqcomp 项目在 /src/bootstrap.js 中引入 wsqgov 暴露的组件文章来源地址https://www.toymoban.com/news/detail-535186.html

......
import storeModDictJs from '@govViewUi/storeModDictJs';
import storeModUserJs from '@govViewUi/storeModUserJs';
import storeModAppJs from '@govViewUi/storeModAppJs';
import storeIndexJs from '@govViewUi/storeIndexJs';
import rtRouterJs from '@govViewUi/rtRouterJs';
import rtIndexJs from '@govViewUi/rtIndexJs';
import axiosJs from '@govViewUi/axiosJs';
import indexBackJs from '@govViewUi/indexBackJs';
console.log('storeModDictJs', storeModDictJs)
console.log('storeModUserJs', storeModUserJs)
console.log('storeModAppJs', storeModAppJs)
console.log('storeIndexJs', storeIndexJs)
console.log('rtRouterJs', rtRouterJs)

到了这里，关于vue前端项目集成emp的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包