vuecli3 实现移动端和pc端界面切换（两套代码）

适合场景

多页面多系统应用

所有系统都在同一目录下。配置多入口多出口。每个系统之间可以链接。每个系统内依然采用Vue单页应用开发。
产品需求：一套代码兼容pc端和移动端，移动端和pc端的样式布局差别很大，需要使用多界面，并判断使用手机的时候跳转移动端代码，使用pc端跳转pc端代码。

项目目录

分为两部分代码，pc 和mobile

第一步：创建一个登陆页面的文件

在项目public文件夹下创建一个login.html，其实就是将index.html复制一份，将title改一下：

<!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"><title>Document</title>
</head><body><div id="login"></div></body></html>

第二步：在src文件夹下创建一个modules文件夹，分别创建login.main.js、login.router.js、login.vue三个文件

三个文件内容如下：

import Vue from 'vue'
import App from './login.vue'
import router from './login.router'Vue.config.productionTip = falsenew Vue({router,render: h => h(App)
}).$mount('#login')

router/index.js中需要的设置

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 首页用重定向的方式来进行适配的方案：
const redirectPath = /Android |webos | iphone iPod BlackBerry liPad/i.test(navigator.userAgent) ? '/m_index' : '/index';import index from '../../components/index.vue'
Vue.use(VueRouter)const routes = [{path: "/",redirect: redirectPath,},{path: '/index',name: index,component: index},]
const router = new VueRouter({// 去掉路由中的#号mode: 'history',routes
})
router.beforeEach((to, from, next) => {if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {window.location.href = '/m_index.html/'return}next()
})
export default router

import Vue from 'vue'
import VueRouter from 'vue-router'
import login from '../../components/login.vue'
Vue.use(VueRouter)const routes = [{path: '/login',name: login,component: login},]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router

界面自行配置

vue.config.js

const path = require('path')
const debug = process.env.NODE_ENV !== 'production'
module.exports = {publicPath: '/', // 根域上下文目录outputDir: 'dist', // 构建输出目录assetsDir: 'static', // 静态资源目录 (js, css, img, fonts)lintOnSave: false, // 是否开启eslint保存检测，有效值：ture | false | 'error'runtimeCompiler: true, // 运行时版本是否需要编译transpileDependencies: [], // 默认babel-loader忽略mode_modules，这里可增加例外的依赖包名productionSourceMap: true, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度configureWebpack: config => { // webpack配置，值位对象时会合并配置，为方法时会改写配置if (debug) { // 开发环境配置config.devtool = 'cheap-module-eval-source-map'} else { // 生产环境配置}Object.assign(config, { // 开发生产共同配置resolve: {// 起别名alias: {'@': path.resolve(__dirname, './src'),'@c': path.resolve(__dirname, './src/components'),'vue$': 'vue/dist/vue.esm.js','assets': '@/assets','common': '@/common','components': '@/components','network': '@/network','router': '@router','views': '@views',}},})},// css: {//   loaderOptions: {//     css: {},//     postcss: {//       plugins: [//         require('postcss-px2rem')({//           remUnit: 37.5//         })//       ]//     }//   }// },pages: {//（1）输出一个页面//  main: {//    entry: 'src/main.js',//    template: 'public/index.html',//    filename: 'maker.html',//    chunks: ['chunk-vendors', 'chunk-common', 'index']//  },//（2）输出多个页面login: {template: "public/login.html",entry: "src/modules/mobile/login.main.js",filename: "login.html",title: "login",keywords: "333",description: "444",},index: {template: "public/index.html",entry: "src/modules/pc/main.js",filename: "index.html",title: "index",keywords: "333",description: "444",}},chainWebpack: config => { // webpack链接API，用于生成和修改webapck配置，https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md// 这里是对环境的配置，不同环境对应不同的BASE_URL，以便axios的请求地址不同config.plugin('define').tap(args => {args[0]['process.env'].BASE_URL = JSON.stringify(process.env.BASE_URL)return args})if (debug) {// 本地开发配置} else {// 生产开发配置}},parallel: require('os').cpus().length > 1, // 构建时开启多进程处理babel编译pluginOptions: { // 第三方插件配置},pwa: {},devServer: {open: false,host: 'localhost',port: 80,https: false,hotOnly: false,// 注意下面 需要写入接口 ， 如果没有接口则进行注释即可proxy: { // 配置跨域'/api': {target: 'https://127.0.0.1:80', //接口域名ws: true, //是否代理websocketschangOrigin: true,  //是否跨域pathRewrite: {        //重置路径'^/api': ''}}},}
}

即可完成

vuecli3 实现移动端和pc端界面切换（两套代码）相关推荐

移动端和PC端的pdf预览与下载
34.移动端和PC端的pdf的预览与下载 1.预览需求:在手机端实现pdf的文件与下载,主要是zlb_app中实现过程:在研究了vue-pdf.pdfjs.pdfh5之后,选择了vue-pdf-s ...
Vue 移动端、PC 端适配
Vue 移动端.PC 端适配可以使用 lib-flexible.amfe-flexible.postcss-pxtorem.postcss-px2rem 和 postcss-px-to-viewpor ...
移动端和PC端的录屏软件汇总，需要的朋友速看
有朋友有屏幕录制的需求吗?我在这里汇总了移动端和PC端的录屏软件,有需要的朋友就看看吧. 移动端录屏软件: 1.嘿录录屏它是一款全新的手机录屏软件,支持录制游戏.直播.课程.会议.网课等内容.操作简 ...
js判断移动端，pc端，安卓，苹果浏览器的方法
js 判断安卓或者ios 之indexOf方式(一) //判断访问终端 var browser={versions:function(){var u = navigator.userAgent, ap ...
360浏览器打不开网页_苹果移动端、PC端safari浏览器打不开网页的解决方案！
你还在为苹果自带的safari浏览器打不开网页而苦恼吗,接下来的答案会帮助你解决苦恼. 苹果自带safari浏览器的设备分为两种:移动端.PC端.因此不同设备出现safari浏览器打不开网页的情况需要 ...
js 判断移动端还是pc端，ios或者android
js 判断移动端还是pc端,ios或者android 法一: function IsPC(){ var userAgentInfo = navigator.userAgent;var Agents = ...
vue 判断移动端、pc端
判断移动端或pc端经常在项目中会有支持 pc 与手机端需求.并且pc与手机端是两个不一样的页面.这时就要求判断设置,根据不同的设置跳转不同的路由. 先写个方法: //APP.vue isMobile ...
移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究
移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究参考文章: (1)移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究 (2)https://www.cnblogs.com/ranyon ...
C#和JQ判断移动端还是PC端
判断移动端还是PC端浏览网页可以使用两种方法: 1.在C#语句进行判断 /// <summary>/// 判断是移动端/// </summary>/// <returns ...

vuecli3 实现移动端和pc端界面切换（两套代码）

多页面多系统应用

vuecli3 实现移动端和pc端界面切换（两套代码）相关推荐

最新文章

热门文章

vuecli3 实现 移动端和pc端 界面切换（两套代码）

多页面多系统应用

vuecli3 实现 移动端和pc端 界面切换（两套代码）相关推荐

最新文章

热门文章

vuecli3 实现移动端和pc端界面切换（两套代码）

vuecli3 实现移动端和pc端界面切换（两套代码）相关推荐