概要

产品：可能需要对我们的官网进行重构，你这边准备一下
前端： 小意思~ 不就是用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

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

创建页面布局

根目录创建 layouts 目录

• 创建 mobile.vue

<template>
  <div>
    <p>这是移动端头部</p>
    <slot />
  </div>
</template>

• 创建 default.vue

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

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

• app.vue

<template>
  <NuxtLayout>
    <NuxtPage></NuxtPage>
  </NuxtLayout>
</template>

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

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

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','')}`)
    }

  }
})

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

引入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
    },
  },
});

• 上面配置的是公共设置 如果想要在页面中设置特殊的
  使用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>

• 页面使用

<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>

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 // 是否处理横屏情况
          })
        ]
      }
    }

  }
 
});

这个时候就可以自由自在使用我们的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',//应用程序的脚本路径。这是启动应用程序的主要入口
     }
   ]
 }

• .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", "")}`
    ); //跳转后没有后退功能
  }
})();

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

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