vue-cli 安转方法和单页面改为多页面应用 (mobile 和 pc 为例子)

最新推荐文章于 2022-06-23 12:59:01 发布

方程式1002

最新推荐文章于 2022-06-23 12:59:01 发布

阅读量419

点赞数

分类专栏： vue javascript

本文链接：https://blog.csdn.net/weixin_44852765/article/details/109023383

版权

javascript 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

vue

11 篇文章 0 订阅

订阅专栏

vue-cli 安转方法和单页面改为多页面应用:

使用vue-cli 搭建一个项目,(没有node.js安转node.js)
- 全局安装Vue-cli : npm install -g vue-cli
- 搭建项目 vue init webpack dome
- 根据自己的需求完成操作, npm run dev 运行项目`
将 vue-cli 搭建的单页面应用改为多页面应用

修改前:
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C2XqqkWE-1602470681637)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201012095504755.png)]$
修改后:
文件内容修改如下开始的三张图片(如下文件一定要改配置)

在 build/webpack.base.conf.js

output 打包输出地址与下文中的地址路径一致(这里以打包上线为目的), 以百度举例http://www.baidu.com/meal
如有大神有更好的方法, 还请不吝赐教, 谢谢~~

在 build/webpack.dev.conf.js

在 build/webpack.prod.conf.js
项目文件说明
- router文件下存放的多路由文件(mobile 和 pc, 在router.beforeEach 中添加条件判断是否进入该文件下面的router),每个文件下都是一个独立的路由
- framework文件下面的mobile 和 pc 中的.vue .js .html 相当于原始的 app.vue , index.html , main.js
- components 文件中即是路由页面文件模块
代码示例

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/pc/HelloWorld'
import SecondPage from '@/components/pc/secondPage'

Vue.use(Router)

let router = new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/secondPage',
      name: 'secondPage',
      component: SecondPage
    }
  ]
})

/**
 * 判断是否为移动设备，是，则跳转到移动端的路径
 */
router.beforeEach((to, from, next) => {
  if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
    // window.location.href = '/m_index.html#/'
    window.location.href = 'http://www.baidu.com/meal/m_index.html#/'//虚拟地址,以百度举例http://www.baidu.com/meal
    return
  }
  next()
})

export default router

mobile 类似略

全局判断
framework/common/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <link rel="shortcut icon" href="../../assets/img/favicon.ico"> -->
    <title>common</title>
</head>
<body>

</body>
</html>
<script>
  function isMobile () {
    var userAgenInfo = navigator.userAgent
    var Agents = new Array('Android', 'iPhone', 'SymbianOS', 'iPad', 'iPod')
    var flag = false
    for (var v = 0; v < Agents.length; v++) {
      if (userAgenInfo.indexOf(Agents[v]) > 0) {
        flag = true
        break
      }
    }
    return flag
  }
  if (isMobile()) {
    window.location.href = 'http://www.baidu.com/meal/m_index.html#/'//虚拟地址,以百度举例http://www.baidu.com/meal
    // window.location.href = '/m_index.html#/'
  } else {
    window.location.href = 'http://www.baidu.com/meal/p_index.html#/'//虚拟地址,以百度举例http://www.baidu.com/meal
    // window.location.href = '/p_index.html#/'
  }
</script>

方程式1002

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-cli 安转方法和单页面改为多页面应用 (mobile 和 pc 为例子)

vue-cli 安转方法和单页面改为多页面应用:使用vue-cli 搭建一个项目,(没有node.js安转node.js)全局安装Vue-cli : npm install -g vue-cli搭建项目 vue init webpack dome根据自己的需求完成操作, npm run dev 运行项目`将 vue-cli 搭建的单页面应用改为多页面应用修改前: 修改后:文件内容修改如下开始的三张图片在 build/webpack.base.conf.j
复制链接

扫一扫