團隊初步使用nuxt

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