nuxt3 一套适配移动端web端 nuxt3一套代码写官网

文章目录 概要初始化项目创建页面布局web端移动端路由分发引入lessSEO处理安装element-plusCSS响应式使用PM2部署总结 优化 针对m站路由跳转出现警告问题

概要

产品：可能需要对我们的官网进行重构，你这边准备一下
前端： 小意思~ 不就是用css+js+html 写个静态吗。顺带把seo再优化下
产品：好的。需求文档你看下
前端：好家伙~ 一个官网pc端和移动端效果根本不一样也不是响应式能做的啊，这怎么还有ui库的功能呢

此时前端同学就开始发愁了，这得写多少代码啊。这应该怎么做。其实很早就有使用vue并且兼容seo有方案了，那就是大名鼎鼎的SSR服务端渲染。
我也是遇到了这么个需求 刚好nuxt3出来也有段时间了。打算尝尝鲜，我使用nuxt3+elmentplus 并且适配pc端移动端 css也同时支持响应式
nuxt3的中文网教程竟然是收费的，果然 有资本的地方一切东西都已丢失了他原本的意义

初始化项目

nuxt3官网

npx nuxi@latest init 你的项目名称
pnpm install 这里你使用的是什么都可以
npm run dev
目前位置就可以看到你的项目正常运行了

如果报错

Error: Failed to download template from registry: request to https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json failed，reason: read ECONNRESET 1

请修改DNS为114.114,114,114 参考链接

创建页面布局

根目录创建 layouts 目录

创建 mobile.vue

<template> <div> <p>这是移动端头部</p> <slot /> </div> </template> 1234567 创建 default.vue

<template> <div> <p>这是默认头部</p> <slot /> </div> </template> 123456

提示：这里可以根据你自己的需要改动

app.vue

<template> <NuxtLayout> <NuxtPage></NuxtPage> </NuxtLayout> </template> 12345 使用
这里实现了路由嵌套并且应用了layouts骨架默认是default。再想要使用其他页面布局的时候可以在页面这样用

<script setup> definePageMeta({layout: 'mobile',// 你的页面解构文件名 对应layouts文件夹中的文件名 }) </script> 12345

web端移动端路由分发

提示：在这里pc端和移动端差距很大的时候响应式已经满足不了我们的需求。但是有很多公共组件和方法是公用的，pc端写一套 移动端写一套无疑是费力不讨好的事情。我们就采用了大名鼎鼎的m站方案， 比如下图 访问/about 路由 但他是移动端进入的 我们帮他跳转到/m/about 。所以移动端的页面相同文件名要在m文件夹中写一遍用来移动端展示

创建如上文件 文件里最好写点东西全局中间件拦截，判断是进入移动端还是pc端页面
根目录创建middleware/auth.global.js 文件内容如下

export default defineNuxtRouteMiddleware((to, from) => { if (process.server){ // 在服务器端处理路由 const nuxtApp = useNuxtApp() } else { // 在客户端处理路由 // 是否是移动端设备 const isMobile = /(Android|webOS|iPhone|iPod|tablet|BlackBerry|Mobile)/i.test(navigator.userAgent) // 是否是手机端路由 const isRouterMobile = /^/m//.test(to.fullPath); // 移动端并且 不是/m开头路由 if(isMobile && !isRouterMobile){ return navigateTo(`/m${to.fullPath}`) } // 不是移动端 是/m开头路由 if( !isMobile && isRouterMobile){ return navigateTo(`${to.fullPath.replace('/m','')}`) } } })

123456789101112131415161718192021222324

看不懂没关系最后有项目地址去看下就好了

引入less

既然都用了vue 肯定less 这种css处理器更方便我们使用

pnpm add less less-loader

下载好了之后页面直接使用就好

SEO处理

打开跟目录nuxt.config.ts文件 配置app选项 没有就添加一个

export default defineNuxtConfig({ devtools: { enabled: true }, app: { head: { charset: "utf-8", viewport: "width=device-width,initial-scale=1", title: "这里是页面title", meta: [ { name: "description", content:"这里是网站描述", }, { name: "Keywords", content:"这是是关键词", }, ], link: [{ rel: "icon", href: "/favicon.ico", type: "image/x-icon" }],// icon }, }, });

123456789101112131415161718192021 上面配置的是公共设置 如果想要在页面中设置特殊的
使用useHead可以在官网搜一下用法 会覆盖公共设置

安装element-plus

根据官方提示安装
切记配置nuxt.config.ts中的配置项
这个时候你的icon是不能用的 想要使用icon 在app.vue写如下代码

<script setup> import * as ElementPlusIconsVue from "@element-plus/icons-vue"; // 注册图标 const nuxtApp = useNuxtApp(); for (const [key, component] of Object.entries(ElementPlusIconsVue)) { nuxtApp.vueApp.component(key, component); } </script> 123456789 页面使用

<template> <Title>首页</Title> <p>我是index页面</p> <el-button @click="ElMessage('hello')">按钮</el-button> <ElButton :icon="ElIconEditPen" type="success">驼峰</ElButton> <LazyElButton type="warning">懒加载按钮</LazyElButton> <el-icon><Minus /></el-icon> <el-steps :space="200" :active="1" finish-status="success"> <el-step title="Done" /> <el-step title="Processing" /> <el-step title="Step 3" /> </el-steps> <div class="a"> <span class="b">13221312</span> </div> </template>

1234567891011121314151617181920

CSS响应式

这里使用 postcss-px-to-viewport 实现css自适应效果 vw方案 只是过渡方案既然浏览器vw支持已经很好了就使用vw方案

下载 pnpm install postcss-px-to-viewport
nuxt.config.ts中配置

import postcsspxtoviewport from 'postcss-px-to-viewport' // https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ devtools: { enabled: true },// 页面最下面的控制台 devServer: { port: 3005, }, app: { head: { charset: "utf-8", viewport: "width=device-width,initial-scale=1", title: "这里是页面title", meta: [ { name: "description", content:"这里是网站描述", }, { name: "Keywords", content:"这是是关键词", }, ], link: [{ rel: "icon", href: "/favicon.ico", type: "image/x-icon" }],// icon }, modules: [ '@element-plus/nuxt' ], elementPlus: { /** Options */ }, vite:{ css: { postcss: { plugins: [ postcsspxtoviewport({ unitToConvert: 'px', // 要转化的单位 viewportWidth: 750, // UI设计稿的宽度 unitPrecision: 6, // 转换后的精度，即小数点位数 propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换 viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw selectorBlackList: ['el-'], // 指定不转换为视窗单位的类名,例如van-（vantUI组件）， minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换 mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false replace: true, // 是否转换后直接更换属性值 exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配，最好不要排除node_modules 文件，排除后在项目中会发现字体不能跟随页面放大 landscape: false // 是否处理横屏情况 }) ] } } } });

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354

这个时候就可以自由自在使用我们的pc直接在页面中疯狂撸码了

这个时候页面中直接写750px 就是100%了。 如果出现滚动条 关闭默认样式margin padding

有心的小伙伴可能就注意了到了 那我一个750的我的pc端怎么办呢，我们其实可以在蓝湖上自定义设计稿宽度 将pc的设计稿和修改为750就可以了

如果使用flexible是在页面执行了一段js脚本。给html设置了font-size但运行js脚本是需要时间的。可能会出现页面特别大突然变小的情况。所以请慎用！！

使用PM2部署

服务器安装PM2 这我就不细讲了。网上搜一下打包项目 npm run build拿到打包后的产物 根目录.output文件夹.output根目录创建ecosystem.config.js

module.exports = { apps: [ { name: 'NuxtAppName', // 设置启动项目名称 port: '3005',// 端口 exec_mode: 'cluster',//应用程序的执行模式。可以是 cluster（多进程模式）或 fork（单进程模式） instances: 'max', //在 cluster 模式下，应用程序运行的实例数量。max 表示根据可用 CPU 核心数创建尽可能多的实例。 script: './server/index.mjs',//应用程序的脚本路径。这是启动应用程序的主要入口 } ] } 1234567891011 .output放到服务器 运行项目 pm2 start ecosystem.config.js设置服务器重启 项目自动启动 pm2 startup

总结

项目地址部署的话可以看官网的PM2部署 也可以自己搜 。这里讲的pm2可能有点糙了不理解的小伙伴可以私信我 也可添加我v互相交流 H1274714546

优化 针对m站路由跳转出现警告问题

删除 middleware/auth.global.js
public下创建isMobile.js 内容如下

(function () { // 获取当前协议（http: 或 https:） const currentProtocol = window.location.protocol; // 获取当前主机（包括主机名和端口号） const currentHost = window.location.host; // 获取当前路径（包括斜杠） const currentPath = window.location.pathname; // 是否是移动端设备 const isMobile = /(Android|webOS|iPhone|iPod|tablet|BlackBerry|Mobile)/i.test( navigator.userAgent ); // 是否是手机端路由 const isRouterMobile = /^/m//.test(currentPath); // 移动端并且 不是/m开头路由 if (isMobile && !isRouterMobile) { window.location.replace( `${currentProtocol}//${currentHost}/m${currentPath}` ); } // 不是移动端 是/m开头路由 if (!isMobile && isRouterMobile) { window.location.replace( `${currentProtocol}//${currentHost}${currentPath.replace("/m", "")}` ); //跳转后没有后退功能 } })();

12345678910111213141516171819202122232425262728293031

nuxt.config.ts 中 app>head中配置下即可

script: [{ src: “/isMobile.js” }],

相关知识

移动端
移动Web实训DAY
花店官网制作【花店官网怎么做】
前端最常用的移动App开发方式及技术栈详解
如何从零高效的开发一款适配 Android 和 iOS 的移动端App
Web 字体 font
Html+Css+js实现春节倒计时效果（移动端和PC端）
什么是移动开发?
Android使用字体图标库
手机移动端快速开发

网址: nuxt3 一套适配移动端web端 nuxt3一套代码写官网 https://www.huajiangbk.com/newsview948668.html

上一篇: web移动端常见面试题以及适配兼

下一篇: vue3+vite+ts中移动端