团队初步使用nuxt

2024年2月15日 408次阅读 来源: spademan

v2.8.x

使用的目的

  • 官网支持SEO
  • 加载速度快(考虑服务端渲染)
  • 技术栈扩展

静态部署

考虑到只是官网，更新较少，并且较少数据交互

选择了静态部署 在本地生成好了之后才上传到线上

具体开发步骤

基础项目搭建
  • yarn create kz-ow的方式构建项目
  • 选择了element-ui
  • 使用默认的nuxt服务器
  • 使用less, 因为sass 还要额外安装node-sass等
  • 基本上使用默认配置
nuxt.config.js 配置
head

配置自定义的head 包含title, meta, link,script

其中通过process.env.NODE_ENV === 'production' 判断是否加载相对域名下的资源

// 例如
const prefix = process.env.SITE_EVN === 'dev' ? '//dev.' : '//'
const assetsPublicPath = 'xxxxx'
// 判断当前资源的path
const publicPath =
  process.env.NODE_ENV === 'production'
    ? prefix + assetsPublicPath || ''
    : ''
const staticPath = publicPath ? publicPath : '/'

link: [
      { rel: 'icon', type: 'image/x-icon', href: `/favicon.ico` },
      {
        rel: 'stylesheet',
        type: 'text/css',
        href: `${staticPath}css/adapter.css`
      },
      {
        rel: 'stylesheet',
        type: 'text/css',
        href: `${staticPath}css/animate3.7.css`
      }
    ]
css

设置自定义的css

其中element-ui的css就是在这里引入

   css: [
      ....
    'element-ui/lib/theme-chalk/index.css'
  ]
generate

因为我们主要是使用在官网，直接静态部署即可

但是由于我们是动态路由

而且存在中英文切换多语言版本的时候体现在路由上，

所以写了一个路由生成的函数 按照 ['zh', 'en', 'GB'] 来生成路由

modules

通过引入 axios与 style-resource 增强nuxt能力

modules: [
'@nuxtjs/axios',
'@nuxtjs/style-resources'
],
plugins

通过 plugins提前导入element-ui i18n device-inject axios等

  plugins: [
    '~/plugins/element-ui',
    '~/plugins/i18n.js',
    '~/plugins/device-inject.js',
    '~/plugins/axios'
  ]
目录
components // 组件库
│   ├── common // 公共组件 
│   ├── mobile // 移动端组件
│   ├── pc // pc端组件
├── config // 一些nuxt.config配置使用到的工具函数
│   ├── assetConfig.js  
│   ├── common.js   
│   ├── generate.js 
│   ├── paths.js    
│   └── route.js    
├── layouts // 使用官方推荐默认layouts
│   ├── default.vue 
│   └── error.vue   
├── lib // 新增一些mixin和工具函数
│   ├── mixins  
│   └── utils   
├── locales // 语言包
│   ├── GB.json 
│   ├── en.json 
│   └── zh.json 
├── middleware  
│   └── i18n.js  // 语言包切换过程中的中间件，主要监听切换路由变换做处理
├── nuxt.config.js // nuxt基本配置
├── package.json    
├── pages  // 动态路由
│   ├── _lang   
├── plugins // 渲染之前提前加入的插件
│   ├── axios.js    
│   ├── cache-error.js  
│   ├── device-inject.js    
│   ├── element-ui.js   
│   └── i18n.js 
├── server  // nuxt静态服务器配置
│   ├── IP.js   
│   └── index.js    
├── server.json 
├── static  // 静态资源
│   ├── css 
│   ├── favicon.ico 
│   ├── images      
│   └── js  
├── store  // state状态管理
│   └── index.js
遇到的坑

支持三种语言切换

  • 切换语言的时候给路由设置相对应的语言前缀
  • 通过劫持路由变化动态更新语言包i18n的语言值

支持移动端和pc端的展示，并且能随时切换语言和展示端

  • 切换语言设置动态路由
  • 在pages中提前设置好pc端和移动端所对应的组件

发包至线上偶尔会出现页面打开变成404

[nuxt] Error while initializing app Error : loading chunk 2 failed
  • 更新nuxt为最新版本 （根本原因可能性最高）
  • 刷新cdn缓存
    原文作者：spademan
    原文地址: https://segmentfault.com/a/1190000020377232
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞