精华内容
下载资源
问答
  • vue开发,现在大部分做的都是(SPA)应用,但是,由于,需求不同,我们针对的用户需求变更较为,频繁,如果每次都全量打包更新,给开发的自测,及测试妹子的任务就会,每次都要重新验证一下才放心。所以,想着能不...

    vue开发,现在大部分做的都是(SPA)应用,但是,由于,需求不同,我们针对的用户需求变更较为,频繁,如果每次都全量打包更新,给开发的自测,及测试妹子的任务就会多,每次都要重新验证一下才放心。所以,想着能不能搞一个多页的,进行增量升级,所以就有了以下的配置。网上配置很多,也很详细,我也有参考。废话不多说开始吧!如果有说的不对的,请大家指出,我会及时改正。

    一 目录结构调整

    修改之后目录

     

    二,配置文件修改

    修改文件utils.js添加以下

    // glob是webpack安装时依赖的一个第三方模块,还模块允许你使用 等符号, 例如lib/.js就是获取lib文件夹下的所有js后缀名的文件
    var glob = require(‘glob’)
    // 页面模板
    var HtmlWebpackPlugin = require(‘html-webpack-plugin’)
    // 取得相应的页面路径,因为之前的配置,所以是src文件夹下的pages文件夹
    var PAGE_PATH = path.resolve(__dirname, ‘…/src/pages’)
    // 用于做相应的merge处理
    var merge = require(‘webpack-merge’)

    //多入口配置
    // 通过glob模块读取pages文件夹下的所有对应文件夹下的js后缀文件,如果该文件存在
    // 那么就作为入口处理
    exports.entries = function() {
    var entryFiles = glob.sync(PAGE_PATH + ‘//.js’)
    var map = {}
    entryFiles.forEach((filePath) => {
    var filename = filePath.substring(filePath.lastIndexOf(’/’) + 1, filePath.lastIndexOf(’.’))
    map[filename] = filePath
    })
    return map
    }

    //多页面输出配置
    // 与上面的多页面入口配置相同,读取pages文件夹下的对应的html后缀文件,然后放入数组中
    exports.htmlPlugin = function() {
    let entryHtml = glob.sync(PAGE_PATH + ‘//.html’)
    let arr = []
    entryHtml.forEach((filePath) => {
    let filename = filePath.substring(filePath.lastIndexOf(’/’) + 1, filePath.lastIndexOf(’.’))
    let conf = {
    // 模板来源
    template: filePath,
    // 文件名称
    filename: filename + ‘.html’,
    // 页面模板需要加对应的js脚本,如果不加这行则每个页面都会引入所有的js脚本
    chunks: [‘manifest’, ‘vendor’, filename],
    inject: true
    }
    if (process.env.NODE_ENV === ‘production’) {
    conf = merge(conf, {
    minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    },
    chunksSortMode: ‘dependency’
    })
    }
    arr.push(new HtmlWebpackPlugin(conf))
    })
    return arr
    }

    修改build/webpack.base.conf.js的入口配置

     

    开发环境build/webpack.dev.conf.js 注释 newHtmlWebpackPlugin…… 在最后添加concat(utils.htmlPlugin())

     生产环境webpack.prod.conf.js 注释 newHtmlWebpackPlugin…… 在最后添加concat(utils.htmlPlugin())

     

    三 完成测试

    在http://localhost:8083/test.html (注:/test.html 不是 /#/test.html)

    就可以看到你想要的结果了。以上,就是多页的配置,网上有好多,我只是做了一下笔记。

    接下来,写下页面,页面之间的跳转

      如上图。我们配置后,其实不难看出,只是多了出口和入口并不能,用统一一个router搞定页面之前的跳转,所以,我这边,用的是单页,即同一入口出口,文件我们用router,页面与页面之间(即 indtx.html与test.htms)的跳转,用location.href 

    window.location.href = '/test.html'

    配置完后,上传打包,我们会发现,跳转并不是我们想想中的那样,他的根目录不同了需要我们做一点处理,这里我想到了两个方案

    方案一: 配置地址根目录

    即,在每一个入口文件.js里加上一个公共的变量,挂在vue上当然,你也可以挂到window上。

    /* 定义不同入口,跳转路径配置 index.js */ if (location.hostname === 'localhost' ) { Vue.prototype.HTTPLOCAT = '' } else { const http = window.location.protocol + '//' + location.hostname + ':' + location.port Vue.prototype.HTTPLOCAT = http + '/netopenws/wt/vue/dist' // (这个路径改为你服务器的路径) }

    接下来页面的跳转用就好了。 

    window.location.href = this.HTTPLOCAT + '/test.html'

    方案二: nginx代理转发 

      nginx代理转发也不麻烦,只是在我们跳转里,前面加上固定的文件名,在nginx进行,代理一下即可。

    /* 定义不同入口,跳转路径配置 index.js */ if (location.hostname === 'localhost' ) { Vue.prototype.HTTPLOCAT = '' } else { Vue.prototype.HTTPLOCAT = '/dist' // (这个路径改为你服务器访问路径) }

    //页面的跳转 window.location.href = this.HTTPLOCAT + '/test.html'

    对应的ngnix  代理

    location /dist { root usr/local/ dist; }

    以上就是这次多页配置的总结

    展开全文
  • 由于上篇博客的vue多项目入口配置最终用起来效果不是很好,所以接下我修改了项目的目录结构,并且修改了相关路由配置关于目录结构的配置,具体参照博客:https://www.cnblogs.com/jasonwang2y60/p/9247283.htmlsrc...

    由于上篇博客的vue多项目入口配置最终用起来效果不是很好,所以接下我修改了项目的目录结构,并且修改了相关路由配置

    关于目录结构的配置,具体参照博客:https://www.cnblogs.com/jasonwang2y60/p/9247283.html

    src下面的目录调整为如下:

    其中:entry文件下放系统的多入口页面,这里我分为了登录端、管理端和业务端。

    router文件夹下放相应的入口页面对应的路由文件

    views文件夹下放相应系统的具体页面实现。如 Login,vue对应文件夹 login的内容。

    修改build文件夹下面的配置文件,主要内容和上篇博客一样,不过需要修改相应的路径(以为我这里的目录结构和上篇博客中不同了)

    那么又回到最初的问题:如何实现这三个系统直接的页面跳转呢?例如,我这里的需求是要能通过 登录端进入管理端或者业务端。

    首先,尝试单页面vue的router方法,

    this.$router.push({path:path});

    这里“path”设为:"/admin.html#/",结果失败。因为push方法实际上只是在url后面添加字段,所以在这种情况下url就变成了:http://localhost:8080/login.html#/admin.html#/,这样是访问不到页面的。

    于是,我在网络上重新查找了一下,在这里找到了解决方案:https://segmentfault.com/q/1010000017866630

    由于VUE本来就是单页应用,如果要多应用之间跳转 可以用原始方法跳转:window.location.href = '/admin.html#/具体页面的path',

    window.location.href = path;

    跳转到管理端的路径为:

    能成功显示页面!至此,整个项目能成功运行和跳转。

    但是,目前还有一个问题就是页面的url显示太长太丑了。。这是Vue路由的默认显示模式“hash”模式,还有一种是我们比较习惯的,看起来比较好看的“history”模式,其url中不会存在“#”这种符号,于是我又想将项目的路由模式改为“histroy”模式。

    故,信心满满,将router文件夹下面的文件做如下修改:

    mode:'history',

    routes: [

    {

    path: '/epi/admin/department',

    name: 'department',

    component: department

    },

    其重点就是添加这个: mode:'histroy'

    在webpack.dev.conf.js文件下做如下修改:(其大意就是根据url里的内容重定向到不同的页面...)

    historyApiFallback: {

    rewrites: [

    {from: /^\/user/, to: path.posix.join(config.dev.assetsPublicPath, 'user.html')},

    {from: /^\/admin/, to: path.posix.join(config.dev.assetsPublicPath, 'admin.html')},

    {from: /^\/login/, to: path.posix.join(config.dev.assetsPublicPath, 'login.html') },

    // {from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'login.html') },

    ],

    },

    重新编译后运行,可以通过:localhost:8080/login、localhost:8080/admin、localhost:8080/user来访问三个系统的入口,

    正当我信心满满,以为成功的时候,通过页面上的:

    部门管理

    员工管理

    去访问 部门管理 页面时,页面跳转成功,url变为:localhost:8080/epi/admin/department,

    然后刷新,出错!!!页面报错:找不到 /epi/admin/department,

    其他子页面情况也如此,故我将配置又改回"hash"模式。

    至于“history”模式,等之后有时间再去研究吧~O(∩_∩)O~

    展开全文
  • 而因为脚手架VueCli所以构建的项目属于单页面应用,因此我们就需要手动去配置,搭建一个多入口应用的体系 需求 首页显示各个应用名称,点击进去各自应用 实现 使用vue/cli生成一个vue项目 npm install -g @vue/...
  • 在由vue-cli构件的项目中,因为是单页面应用,经常导致手机个地方有切入口的时候,做返回和跳转经常出现一些问题. 个人感觉可以整体对页面的浏览轨迹进行方法控制,不用借助原来的this.$router.go(-1)方法. 实现起来也...

    在由vue-cli构件的项目中,因为是单页面应用,经常导致手机多个地方有切入口的时候,做返回和跳转经常出现一些问题.

    个人感觉可以整体对页面的浏览轨迹进行方法控制,不用借助原来的this.$router.go(-1)方法.

    实现起来也很简单.就是做个公共数组变量来处理浏览的前进和后退.
    historyrecords.js

    var historyrecords = [];
      export default {
        historyrecords
      }
    

    main.js引入

    //定义一个总的历史记录管理数组
    import historyrecords from "./publicjs/historyrecords";
    Vue.prototype.$historyrecords = historyrecords;
    

    然后到子页面进行处理

    this.$historyrecords.historyrecords = common.handlehistoryrecords(
          this.$historyrecords.historyrecords
        );
    

    公共方法里:

    handlehistoryrecords: function (historyrecords) {
        if (!historyrecords || historyrecords.length == 0) {
          historyrecords = [
            {
              pageindex: 0,
              pageurl: window.location.href,
              pagehash:window.location.hash
            }
          ];
        } else {
          let lastobj = historyrecords[historyrecords.length - 1];
          let lasthashshort = lastobj.pagehash.split("?")[0];
          if (window.location.href.indexOf(lasthashshort)!=-1) { 
            return historyrecords;
          }
          if (historyrecords.length>=2) { 
            let prelastobj = historyrecords[historyrecords.length - 2];
            let prelastobjshort = prelastobj.pagehash.split("?")[0];
            if ( window.location.href.indexOf(prelastobjshort)!=-1) { 
              historyrecords.pop();
              return historyrecords;
            }
          }
          let getlength = historyrecords.length;
          historyrecords.push({
            pageindex: getlength,
            pageurl: window.location.href,
            pagehash:window.location.hash
          });
        }
        return historyrecords;
      }
    
    展开全文
  • 前言:我使用vue编写的h5公众号,实现点击小程序入口,打开小程序,微信官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html 要求:微信版本要求为:7.0.12及以上。...
  • 实现页面跳转需要进行页面的移动和配置 1.初始化项目,进入项目根目录下,我们会看一般性的文档配置如下: 我们需要修改的是public文件夹和src文件夹,以及增加一个配置文件vue.config.js. 在我们原本的项目中...

    通常我们在vue框架中制作页面都是单页面操作,如果我们想要进行多页面操作,比如实现显示不同ico图标都需要进行多页面操作,下面我们一起来实现

    实现多页面跳转需要进行页面的移动和配置
    1.初始化项目,进入项目根目录下,我们会看一般性的文档配置如下:
    在这里插入图片描述

    我们需要修改的是public文件夹和src文件夹,以及增加一个配置文件vue.config.js.

    在我们原本的项目中index.html、main.js和app.vue的位置是:

    1.index.html —> 在public文件夹下
    2.main.js —>在src文件夹下
    3.app.vue —>在src文件夹下

    第一步:

    在src中创建几个文件夹view在view文件夹里面在创建几个文件夹,比如我创建的Ding文件夹,index文件夹,postbox文件夹
    (views文件夹不用理会我自己弄得玩儿的)
    在这里插入图片描述

    第二步:

    把index.html文件,main.js文件,app.vue文件放到其中一个里面,我放到了index文件夹里面(省劲的做法在每个文件夹里面都复制一份)

    每个文件夹下都有一个.html后缀的文件(页面主文件),.js文件(主入口)和.vue(根组件)
    在这里插入图片描述
    p.s:其实这样的文件就是vue默认的文件配置,只是vue默认把它们分开在了不同的文件夹里(主入口文件main.js和根组件app.vue放在了src文件夹下,index.html主页面文件放在了public文件下)

    第三步:

    1.移动之后项目失去了默认的入口配置,我们需要重新配置一下(很简单)
    我们需要在根目录下创建一个vue.config.js文件
    在这里插入图片描述
    2.在里面我们可以配置每个页面的入口文件,和输出路径
    代码加图片:

    module.exports={
        pages:{
            index:{
                entry:"./src/view/index/main.js",
                template:"./src/view/index/index.html",
                filename:"index.html",
                title:"河北新龙科技集团"
            },
            Ding:{
                entry:"./src/view/Ding/main.js",
                template:"./src/view/Ding/index.html",
                filename:"dingding.html",
                title:"钉钉"
            },
            postbox:{
                entry:"./src/view/postbox/main.js",
                template:"./src/view/postbox/index.html",
                filename:"youxiang.html",
                title:"邮箱"
            },
        }
    }
    

    在这里插入图片描述

    3.由于位置移动了,所以我们在进行单页面跳转的路径也要更改
    在这里插入图片描述
    4.最后就可以在之前的跳转页面用a标签进行多页面跳转了
    (这里直接写view中你要跳转的文件夹名就可以比如Ding)
    在这里插入图片描述

    注意:

    为了验证是否成功,我们可以用不同的ico图标以及不同标签来展示
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    最后让我们一起来见证奇迹吧!
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

    展开全文
  • 一、router文件夹下的index文件中给每个path添加meta:{}: export default new Router({ routes: [ { path: '/', name: 'index', component: index, meta: { title: 'title1' ...二、js入口文件main.
  • vue项目多入口配置

    2019-10-10 15:18:05
    vue项目简单的多入口配置的相应更改,可配置为打包成个html文件,通过访问不同的地址进行对应页面的跳转,简单明了的进行区分入口文件
  • vue的脚手架弄成功后(用命令 vue init webpack my-project),是一个单页面应用,改成应用入口,就可以用不同的url直接访问不同页面,这样方便页面跳转,而不是把所有的东西都放到一个页面中。 而webpack能够帮...
  • vue项目配置多入口(分模块打包)

    千次阅读 2019-09-29 14:25:32
    有时候在一个vue项目需要入口,解决这个问题的方法有两种: 方法一: ...给vue项目配置入口文件,通过访问的地址的不同进行页面的跳转 具体操作为: 在pages文件夹下新建index和admin、unquali...
  • 前言网上vuecli页面配置教程大多讲的是如何配置页面,少有见到介绍页面的优化方案。以下总结几点缺陷:1、如何公共引入?公共入口怎么设置?2、路由跳转和传参怎么方便?3、每个页面都要手动创建?项目结构├...
  • vue多页面路由相互跳转问题?

    千次阅读 2020-02-26 10:31:03
    由于业务需要,需要使用到页面,最近在页面中路由跳转遇到了一个问题: 1、有index.html、exchange.html两个模板文件,分别对应两个入口vue.config.js配置如下 // 配置页面入口 pages: { index: { ...
  • 所以把vue.config.js 改为了如下 module.exports = { devServer: { port: 3007, host: 'localhost', open: true, historyApiFallback: { rewrites: [ { from: /^\/login/, to: '/login.html' }, ] }, proxy: { '/...
  • 1.新建项目新建vue项目直接通过命令行即可,过程比较简单,具体参照:https://www.jianshu.com/p/02b12c600c7b需要注意的是,直接在需要生成的目录下用命令行操作即可,不用先新建该项目的文件夹。2.遇到报错Error: ...
  • Vue 页面跳转路由

    千次阅读 2020-11-01 16:09:25
    跳转 流程 1.新增页面(也就是组件)并暴露出去 1.新增路由,并引入新增的页面(组件),并设置路由规则 1.在入口main.js中引用路由,并使用 项目结构: 1 新建views文件夹存放页面 ,新增页面 Login.vue <...
  • Express + Nginx 部署Vue实现路由跳转

    千次阅读 2020-11-10 15:34:44
    但是Vue是单页面应用,如果直接将打包好的dist文件扔到服务器用Nginx指向对应目录的index.html的话,那就只能有一个入口;为了解决这种情况,搜集了下其他博客以及向同事讨教,记录下利用Express当作http服务器的...
  • 今天遇到一个bug,记录下来:项目中存在个记录页面,每个记录页面实际上用的是同一个.vue页面,只不过通过不同的入口进入,每次进入url处的formtype值(自定义页面标识)都不一,而且,页面的列表部分调用不同的...
  • 1-2:login.main.js login.router.js login.vue login.main.js import Vue from 'vue' ; import login from './login.vue' ; import router from './login.router' ; // import store from '...
  • Vue-页面跳转去掉.html后缀的解决办法 首先我要问你个问题,为什么加载网页会默认执行index.html? index.html其实本意是导航页,也就是在这个页面上包含了网站上的基本连接,可以理解为,你访问一个地址,默认...
  • Vue点击按钮跳转页面的实现方法

    万次阅读 2020-05-02 14:47:23
    1、跳转外部链接并覆盖当前页 <el-button type="primary...应用入口</el-button> cimsInputClick () { window.location.href = 'https:\\www.mscims.com' }2、跳转不覆盖当前页面,在新窗口打开 <el-b...
  • vue多页面配置以及实现路由跳转

    千次阅读 2020-08-02 14:31:55
    1.在src文件夹下新建一个view文件夹,用于存放个页面。 2.在view文件夹下新建一个index文件夹,把public目录下的index.html,src目录下的main.js、App.vue统一挪到index文件夹下(记得修改相对应的路径) 3.再...
  • vue配置为页面应用,页面应用设置默认跳转页面
  • vue关闭当前页面 跳转_vue常见面试题

    千次阅读 2020-11-19 23:08:33
    1.vue优点? 答:轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb; 简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习; 双向数据绑定:保留了angular的特点,在数据操作方面...
  • vue-cli3环境多入口,分别打包

    千次阅读 2019-04-17 15:13:29
    最近公司需求,参考了很资料,自己搭了一个小demo。 一、安装 1.Vue CLI 3需要 nodeJs ≥ 8.9 ,查看node版本升级,升级一下 2.查看版本vue -V,安装vue-cli3,npm install -g @vue/cli 二、使用 1.vue create ...
  • (其实这样的文件就是vue默认的文件配置,只是vue默认把它们分开在了不同的文件夹里(主入口文件main.js和根组件app.vue放在了src文件夹下,index.html主页面文件放在了public文件下)) 3.移动文件夹
  • Meta摘要本文以一个点击 vue 页面元素跳转到对应 vscode 代码的 loader 和 plugin 开发实战,讲述 webpack loader 和 plugin 开发的简单入门...
  • Vue组件显示与页面跳转

    千次阅读 2020-12-19 14:44:27
    最近在学习vue框架,从网上找了一个实例但是只有一个页面,就是所有组件都放到App.vue里,结果点击按钮,所有内容都显示在当前页面,但是我想实现页面的跳转,搞了好几天,终于在网上找到了一个例子。下面贴出在一个...

空空如也

空空如也

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

vue多入口跳转

vue 订阅