精华内容
下载资源
问答
  • vue 项目集成active控件

    千次阅读 2019-01-11 03:47:46
    最近的项目里面有一项功能需要集成扫描仪,在安装了扫描仪驱动后,还需要在项目里面集成其ActiveX控件,主要的问题就在于我需要扫描仪的某些方法加入一些其他操作。由于这东西是不开源的,在Google上搜索良久,也...

    最近的项目里面有一项功能需要集成扫描仪,在安装了扫描仪驱动后,还需要在项目里面集成其ActiveX控件,主要的问题就在于我需要扫描仪的某些方法加入一些其他操作。由于这个东西是不开源的,在Google上搜索良久,也看到很多人都在寻找办法,最后居然告诉我一个ActiveX控件和vue不能共存的结论,什么鬼?最后不得不请教公司大佬,现在把我的这个实现贴出来分享一下。

    解决方案

    1. 在需要使用扫描仪的功能对应的组件上引入控件,并将其指定为全局对象,假设为scan.js:
    let modelue = {
        name: 'scan',
        template: `...
        <div style="display: none">
            <object id="ScanObj" classid="clsid:xxxx" codebase="xxx" width="0" height="0" ref="ScanObj">
            </object>
        </div>
        ...
        `
        data () {},
        methods: {},
        created() {
            <!--在created中将该实例指定为全局对象。-->
            window.scan = this
        }
    }
    export default module
        
    复制代码

    其中,classid为控件对应的clsidcodebase为你在项目中存放的控件地址。

    1. 在整个项目的index.html中引入控件,对应的写法为:
    <script language='javascript' for="ScanObj" event="OnScan(id, name)">
      window.scan.onScan({id: id, name: name});
    </script>
    <script language='javascript' for="ScanObj" event="OnUploadOver()">
      window.scan.onUpload();
    </script>
    复制代码

    其中, for="ScanObj"的内容必须与1中定义的objectid一致,event为扫描仪控件自带的方法,window.scan.onScan({id: id, name: name})指定对应的组件中的某个方法。

    1. 在scan.js中你就可以愉快的使用这个控件啦。 示例:
    methods: {
        initScan () {
            <!--使用this.$refs.scanObj获取该控件对象-->
            console.log('scanObj', this.$refs.scanObj)
        },
        onScan () {},
        onUpload () {}
    }
    复制代码

    待改进的地方: 如果有多个地方需要用到扫描仪,且是在不同的组件中,处理起来就相对麻烦了。目前正在考虑如何解决这问题。

    展开全文
  • 在springboot下部署多个vue项目,只需要将vue打包成静态文件后,将其放在resources的静态文件夹下即可。 如下图:static目录下有三个vue的静态文件夹,分别为运营后台(admin)、企业后台(company)、网站前端...

    原文地址:https://www.cnblogs.com/zuidongfeng/p/7906649.html

    在springboot下部署多个vue项目,只需要将vue打包成静态文件后,将其放在resources的静态文件夹下即可。

    如下图:static目录下有三个vue的静态文件夹,分别为运营后台(admin)、企业后台(company)、网站前端(www)

    访问地址:

    运营后台:http://ip:port/admin/index.html

    企业后台:http://ip:port/company/index.html

    网站前端:http://ip:port/front/index.html

     

    转载于:https://www.cnblogs.com/zhengOK/p/10396120.html

    展开全文
  • Github项目地址 : ...1.如果项目可能有对应多个不同UI界面;对于这样的场景你可能首先会想到,用样式主题就可以实现,基本的样式或者换肤是可以通过样式实现。但如果要实现更复杂的,比如不同两套UI的界面可...

    Github项目地址 : https://github.com/BothEyes1993/vue-multi-module

    目标:多模块集成的vue项目,多项目共用一份配置,可以互相依赖,也可以独立打包部署

    使用业务场景
    1.如果项目可能有对应多个不同UI界面;对于这样的场景你可能首先会想到,用样式主题就可以实现,基本的样式或者换肤是可以通过样式实现。但如果要实现更复杂的,比如不同两套UI的界面可能功能显示及样式都有差别,那就不得不单独拆成一个项目,但是这样又会造成每个项目很多冗余代码。

    2.如果项目有多个子模块(同时子模块之间又存在互相依赖关系);对于这样的场景是可以把项目独立发布到npm仓库,但是这样又涉及到每个模块都需要独立编译好再发布,实际过程有显得有些繁琐(实际视情况而定)。

    对于以上场景可以使用一个项目管理多个子模块也是一个不错的选择。

    多页面和多模块区别
    多页面:多页面是指一个项目有多个入口,打包是会生成多个html文件,实际开发过程中都是混合在一个项目中开发;

    多模块:是指不同的业务模块可以进行拆分;各自独立运行、也可以互相引用,这一点和通过 npm 发布是类似的;对于一些项目本身不允许发布的情况下,既可以独立开发,又不需要发布到共有仓库(当然也可以通过建立私有仓库解决哈)

    问题:
    1,如何划分子模块;
    2,如何分离可复用组件;
    3,如何独立编译,每个子模块独立打包编译、运行;

    优点
    1,高复用性
    2,统一管理依赖库
    3,不同模块使用的依赖各自按需打包
    4,模块之间相互独立运行、编译、打包
    5,模块之间可以直接互相引用,不需要iframe(一般方式是通过iframe嵌入,这样的性能相当差)

    一:开始创建项目
    先用vue-lic创建个demo项目:

    vue init webpack vue-multi-module
    先看看创建成功的项目目录:
    在这里插入图片描述
    创建完后先跑起来看看:

    npm run dev
    在这里插入图片描述

    二:添加多项目模块
    把src目录下的文件换成多模块的形式
    在这里插入图片描述
    build:编译、运行相关脚本文件
    config:编译、运行相关配置文件
    static:不需要编译的静态资源,放到对应的模块目录下

      子模块1
    
      子模块2
    
       ...
    

    src:项目源码

    comm:公共模块
    
            script:公共js文件
    
            components:公共组件
    
    子模块1:
    
            assets:样式、图片等资源文件
    
            common:业务相关的公共文件
    
            components:业务组件
    
            router:路由配置
    
            store:vuex相关
    
            views:页面视图
    
    子模块2:
    
    子模块3:
    
     ...
    

    项目模块结构安装上面的改动完毕之后,控制台会报一些路径错误之类的:
    在这里插入图片描述
    这是因为webpack.base.conf.js里面的main.js的路径发生改变导致的,之前项目是单模块只要一个main.js,现在换成多模块之后每个模块都有自己独立的main.js,所以要修改配置。

    三:修改配置
    1.增加 config/multi.conf.js :多模块配置文件,定义各个模块自己的端口,名称,转发规则,静态资源


    // 多模块独立配置
    var importModules = [
    new MultiModule(‘project1’, {
    port: 8091,
    statics: [‘static1’],
    proxyTable: {
    ‘/servers1/’: getProxyConfig(PROXY_DOMAIN_DEFAULT)
    }
    }),
    new MultiModule(‘project2’, {
    port: 8092,
    statics: [‘static2’],
    proxyTable: {
    ‘/servers2/’: getProxyConfig(PROXY_DOMAIN_DEFAULT)
    }
    }),
    new MultiModule(‘project3’, {
    port: 8093,
    statics: [‘static3’],
    proxyTable: {
    ‘/servers3/’: getProxyConfig(PROXY_DOMAIN_DEFAULT)
    }
    }),
    new MultiModule(‘project4’, {
    port: 8094,
    statics: [‘static4’],
    proxyTable: {
    ‘/servers4/’: getProxyConfig(PROXY_DOMAIN_DEFAULT)
    }
    })
    ]

    2.修改 build/webpack.base.conf.js 文件:修改启动项目的入口文件,添加各个模块的别名


    module.exports = {
    context: path.resolve(__dirname, ‘…/’),
    entry: multiConfig.process.entry,
    output: {
    path: config.build.assetsRoot,
    filename: ‘[name].js’,
    publicPath: process.env.NODE_ENV === ‘production’
    ? config.build.assetsPublicPath
    : config.dev.assetsPublicPath
    },
    resolve: {
    extensions: [’.js’, ‘.vue’, ‘.json’],
    alias: {
    ‘vue$’: ‘vue/dist/vue.esm.js’,
    ‘@comm’: resolve(src/comm),
    ‘@’: multiConfig.process.alias,
    …multiConfig.moduleAlias
    }
    },

    以上两个配置加上之后之前的main.js错误就消失了,但是又会报一些语法错误:
    在这里插入图片描述
    在这里插入图片描述
    这是因为项目中的用了sass语法和一些es6语法缺少转码包,所以要加上对应的包:
    在这里插入图片描述
    到这里项目就可以正常启动了:
    在这里插入图片描述
    在这里插入图片描述
    3.修改package.json文件

    这里默认启动的是project1,如果需要启动project2,project3,就需要在package.json里面加对应的script
    在这里插入图片描述
    现在可以启动:npm run dev:project2
    在这里插入图片描述
    可能大家注意到了每次启动的时候端口都是一样的:
    在这里插入图片描述
    这样如果同时启动多个项目就没法区分谁是谁了,所以要在webpack.dev.conf.js里面的compilationSuccessInfo/messages里面加上对应项目的提示信息和自定义端口,以及每个项目的代理转发地址也不同,也要从multi.conf.js获取,涉及到修改以下的两个配置文件

    4.修改webpack.dev.conf.js和config下的index.js文件

    webpack.dev.conf.js:修改本地转发规则proxy(指向multi),修改启动后的描述文字

    // Add FriendlyErrorsPlugin
    let host = [‘localhost’, ‘127.0.0.1’, ‘0.0.0.0’].includes(devWebpackConfig.devServer.host) ? ‘localhost’ : devWebpackConfig.devServer.host
    devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
    compilationSuccessInfo: {
    messages: [chalk{bold.rgb(255,255,0) [${pack.name} => ${multiConfig.process.name}]} App running at:\n - Local: {bold.cyan http://${host}:${port}${config.dev.assetsPublicPath}}\n - Network: {bold.cyan http://${getIPAdress()}:${port}${config.dev.assetsPublicPath}}]
    },
    onErrors: config.dev.notifyOnErrors
    ? utils.createNotifierCallback()
    : undefined
    }))

      resolve(devWebpackConfig)
    }
    

    })
    })
    index.js:修改所有启动端口(port)和静态资源地址(static)

    dev: {

    // Paths
    assetsSubDirectory: multiConfig.process.assetsSubDirectory,
    assetsPublicPath: multiConfig.process.assetsPublicPath,
    proxyTable: null,
    
    // Various Dev Server settings
    host: multiConfig.process.host, // can be overwritten by process.env.HOST
    port: multiConfig.process.port, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    

    在这里插入图片描述
    到这里本地启动的名称,端口,代理,静态资源都已经区分开了。接下来打包的时候也要按需打包每个模块项目自己的依赖的资源:

    5.修改package.json和config下的index.js文件

    package.json:新加命令

    “build”: “npm install && npm run build:project1 && npm run build:project2 && npm run build:project3 && npm run build:project4”,
    “build:project1”: “node build/build.js name=project1”,
    “build:project1:zip”: “node build/build.js name=project1 zip”,
    “build:project2”: “node build/build.js name=project2”,
    “build:project2:zip”: “node build/build.js name=project2 zip”,
    “build:project3”: “node build/build.js name=project3”,
    “build:project3:zip”: “node build/build.js name=project3 zip”,
    “build:project4”: “node build/build.js name=project4”,
    “build:project4:zip”: “node build/build.js name=project4 zip”,
    config下的index.js:各模块分开打包后的路径

    build: {
    // Template for index.html
    index: multiConfig.process.index,

    // Paths
    assetsRoot: multiConfig.process.assetsRoot,
    assetsSubDirectory: multiConfig.process.assetsSubDirectory,
    assetsPublicPath: multiConfig.process.assetsPublicPath,
    

    }
    6.webpack.prod.conf.js:打包的时候静态资源按需copy拉取(CopyWebpackPlugin),添加模块压缩添加packZip.js。

    new CopyWebpackPlugin(multiConfig.process.publics.filter(name => isDirectory(path.resolve(__dirname, `../static/${name}`))).map(name => {
      return {
        from: path.resolve(__dirname, `../static/${name}`),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    })),
    // pack zip
    ...require('./packZip')
    

    packZip.js:依赖filemanager-webpack-plugin打包zip组件,package.json相应添加


    plugins.push(new FileManagerPlugin({
    onEnd: {
    delete: [
    path.join(__dirname, ../${pack.name}_${multiConfig.process.name}_*.zip)
    ],
    archive: [{
    source: path.join(__dirname, ../dist/${multiConfig.process.name}),
    destination: path.join(__dirname, zipPros[1] ? ../${pack.name}_${zipPros[1]}.zip : ../${pack.name}_${multiConfig.process.name}_v${pack.version}_${datetime}.zip)
    }]
    }
    }))
    }
    到这里模块项目已经实现多模块启动,按需打包,压缩等功能
    在这里插入图片描述
    完整项目地址 : https://github.com/BothEyes1993/vue-multi-module

    展开全文
  • 一、业务描述: 最近在做一个电商的项目,里面有平台端和商家端以及用户端,那么这么多Vue项目如何部署到...三、如果此时有多个vue项目呢? 多加几个location即可 四、最后记得保存 :wq 五、重新启动Nginx systemctl

    一、业务描述:
    最近在做一个电商的项目,里面有平台端和商家端以及用户端,那么这么多Vue项目如何部署到服务器呢?

    二、部署
    (1)首先在本地测试项目可以启动并且能正常运行。
    (2)在项目中输入npm run build

    此时会生成一个文件

    (3)在服务器上安装Nginx,并将admin-web上传到服务器。
    我上传的位置:

    (4)修改Nginx文件,找到nginx.conf

    三、如果此时有多个vue项目呢?
    多加几个location即可

    四、最后记得保存
    :wq
    五、重新启动Nginx
    systemctl restart nginx

    六:Nginx.conf的内容

    server {
    listen 80;
    server_name localhost;

        #charset koi8-r;
    
        #access_log  logs/host.access.log  main;
    
        location / {
            root   html/dist/;
            index  index.html index.htm;
            try_files $uri $uri/ @router;
            index index.html;
        }
        #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
       location @router {
        #          #因此需要rewrite到index.html中,然后交给路由再处理请求资源
                  rewrite ^.*$ /index.html last;
        }
    
        location /admin {
            alias  /usr/local/nginx/admin/dist;
            index  index.html index.htm;
            try_files $uri $uri/ @router;
            index index.html;
        }
    
                #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的
       location @router {
      #          #因此需要rewrite到index.html中,然后交给路由再处理请求资源
            try_files $uri $uri/ @router;
            index index.html;
        }
    
                #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体>的文件
       location @router {
      #          #因此需要rewrite到index.html中,然后交给路由再处理请求资源
             rewrite ^.*$ /index.html last;
        }
    
    展开全文
  • VUE项目集成环信WebIM即时通讯以及所遇到的问题

    万次阅读 多人点赞 2018-05-11 11:10:36
    之前和朋友一起做了一wbe项目集成环信的即时通信的功能,做的时候感叹web端文档太少,而且npm包有一些坑,记录下来写了这篇博客,之后不断有人加我微信问我,怎么集成.现在我再来重写一下这篇博客. 环信web集成功能...
  • 写两生产的配置启动加载文件一般配置的只要配置config里面的配置信息,大概是一些url和项目描述 配置package.json的启动命令"dev:workorder": "cross-env PROJECT=workorder nodebuild/dev-server...
  • nginx 部署多个vue项目, 静态资源404 1: 路由配置 const RouterConfig = { base: '/aa/', mode: 'history', routes: [ ... ] }; 2: vue.config.js配置 module.exports = { publicPath: '/aa/', devServer: ...
  • vue项目npm集成vuex

    千次阅读 2019-07-29 11:29:55
    直白点说,vuex就是专门为vue.js设计的全局变量管理插件,例如用户个人信息等。如想更深入了解vuex,请直接查看官方文档,话不说,动手操作吧: 1.安装vuex:npm install vuex --save 2.创建store.js,为了后期...
  • springboot项目集成vue

    千次阅读 2019-10-22 17:39:56
    随后我们的项目中会出一dist文件夹:如下图 然后将dist文件夹中的所有内容放到eclipse中的src/main/resources/static文件夹里面。(eclipse中默认是没有static文件夹的,需要你手动创建)如下图: 最后就是...
  • Vue项目中最简单的使用集成UEditor方式,含图片上传

    万次阅读 多人点赞 2018-08-23 10:26:13
    前言 上图是UEditor的 百度指数 折线图。虽然今天已经是 2018 年...目前,UEditor官网的最后一次版本更新是 1.4.3.3,这已经是 2016 年的事情了,而今天的前端开发,很小伙伴都在使用Vue,React 这种组件化的前端...
  • 详细讲解如何使用 Vue CLI 搭建前端项目以及项目结构分析。
  • 本文以vue-cli3+为例,实现系统集成下的分模块打包。
  • 公司项目需求,一个系统包含多个子系统,子系统目前跟系统风格基本一致,也有很多公共部分,三年前做过一个类似这种的,拆分出公共项目和子项目分别维护,这也应该算是现在造的名词前...
  • vue项目集成graphql(vue-ApolloClient)

    千次阅读 2018-11-09 15:18:19
    GraphQL 是一用于 API 的查询语言,是一使用基于类型系统来执行查询的服务端运行时 下图展示graphql所处的位置 2.优点 1.GraphQL API 有强类型 schema GraphQL schema是强类型的,可使用SDL(GraphQL Schema ...
  • 第一个Vue项目的搭建

    2020-03-16 00:02:03
    vue-cli 官方提供的一脚手架,用于快速生成一 vue项目模板; 预先定义好的目录结构及基础代码,就好比咱们在创建 Maven 项目时可以选择创建一骨架项目,这骨架项目就是脚手架,我们的开发更加的快速; 它主要...
  • 单点登录CAS集成前后台分离vue项目

    万次阅读 热门讨论 2019-07-08 11:01:07
    spring boot项目访问jsp页面已经介绍了如何在springboot项目中访问jsp页面,有了上面的基础在下面实现cas集成vue项目,由于vue项目是前后台分离的,在此记录下具体集成的步骤,方便以后查看 项目背景:cas集成的...
  • 基于 vue-cli 2 实现,vue 多模块、vue项目...1.如果项目可能有对应多个不同UI界面;对于这样的场景你可能首先会想到,用样式主题就可以实现,基本的样式或者换肤是可以通过样式实现。但如果要实现更复杂的,比如...
  • 本博文主要介绍如何在VueCli项目中使用ElementUI,主要包括两大步骤:一、创建Vue项目;二、使用ElementUI 一、创建Vue项目 1.创建Vue项目 打开cmd命令窗口,进入工作目录,例如:F:\Study\elmentUI\demo 输入...
  • 一开始很刚入手vue.js的人,会扒GitHub上的开源项目,但是发现不知如何运行GitHub上的开源项目,很尴尬。通过查阅网上教程,成功搭建好项目环境,同时对前段工程化有了朦朦胧胧的认知,因此将环境搭建过程分享给...
  • 如何运行一个Vue项目

    2020-12-29 21:06:29
    一开始很刚入手vue.js的人,会扒GitHub上的开源项目,但是发现不知如何运行GitHub上的开源项目,很尴尬。通过查阅网上教程,成功搭建好项目环境,同时对前段工程化有了朦朦胧胧的认知,因此将环境搭建过程分享给...
  • Vue2集成UIkit

    千次阅读 2017-04-26 10:43:05
    Vue只是为我们提供了一很优秀的前端组件式开发框架,但单纯依靠Vue是做不出一漂亮的网页应用的,甚至连“不难看”这标准都达不到。这时候借助界面框架UIkit能够很好地解决这一问题。 本文出自《 Vue只是为...
  • 这两天手头的一任务是给一五六年的老项目添加语言。这个项目庞大且复杂,早期是用jQuery实现的,两年前引入Vue并逐渐用组件替换了之前的Mustache风格模板。要添加语言,不可避免存在很文本替换的工作,...
  • 由于项目需要集成良田的高拍仪功能,所以按我们项目需要测试了一些功能,写了例子。 首先第一步,是去良田的官网去问售后一份demo例子 良田官方地址:https://www.eloam.cn/, 主要是因为每机器的编码不同,需要问...
  • 问题,百度上很,各种各样的方法都有, 解决方法 配置系统变量里面开始配置了一bin文件,把这目录删除掉就ok了 ,主要是因为我自己开始受到配置了一,不配置是没有问题的。node在安装的时候会自己配置到...
  • 最近接到一官网项目,有pc和h5两端,想着又要新开两个项目,一放pc,一放h5,然后发布的时候又要分开,不由得头大,忽然想起webpack不是有页面嘛,干嘛不一个项目pc端页面,一h5端页面,然后像图片...
  • 项目处于缓冲期,时间充裕,于是从vuecli2.x将脚手架升级为vuecli3.x,并且需要多个项目引用一些公用封装的组件库,工具库或资源之类,于是集成在一起.当时做的时候,vuecli4正好出来了,前项目就是用的vuecli3.x,只是说这...
  • 前言市面上的前端框架中,Vue+Cesium 可谓是最佳搭档,一般做 Cesium B 端产品的公司都会使用 Vue,所以后续内容都将基于 Vue通常情况下,我们要在 Vue 中使用 C...
  • 接下来我会先说该如何在vue项目中去配置webIM的环境以及集成webIM的方法。 1. 第一步是npm install 依赖包 npm install easemob-websdk npm install strophe.js 2. 修改原生代码文件 斜体样式找到node_modules/...
  • 如何开始一个vue项目

    千次阅读 2018-05-21 17:17:52
    但是接触到vue项目,发现自己完全不知从何下手。之后再网上查找了一些vue开发环境搭建的教程,跟着把环境搭建好了,现在梳理总结一下,以免忘记。 步骤如下: 1.安装node.js 官网地址:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,746
精华内容 9,098
关键字:

多个vue项目集成

vue 订阅