团队初步使用nuxt

2019-09-13 admin

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-uicss就是在这里引入

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

generate

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

但是由于我们是动态路由

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

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

modules

通过引入 axiosstyle-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缓存

[转载]原文链接:https://segmentfault.com/a/1190000020377232

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-75004.html

文章标题:团队初步使用nuxt

相关文章
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
在 Microsoft Azure 中使用 MEAN 堆栈基于开放数据协议
网络开发人员通常构建伟大的应用程序在客户端使用JavaScript和ASP(c#或Visual Basic . NET)在服务器端。 但是如果你能使用一个共同的语言来构建应用程序的所有层堆栈,从浏览器和服务器端业务处理服务层,甚至在数据库查...
2015-11-12
使用axios发送post请求,body传送数据格式form和json区别
先来看看这两个种传送格式的写法 1.form格式,将Content-Type类型设置为application/x-www-form-urlencode,POST请求时将data序列化,提交的数据会按照 key1=val1&key2=...
2018-07-25
Bootstrap table简单使用总结
最近接触一个很棒的插件,Bootstrap table没做过前端的表示对table的印象还只停留在html的table标签那一套,用过bootstrap table之后不得不说真的很实用。 构造方式 1 、HTML <div clas...
2017-03-17
js使用split函数按照多个字符对字符串进行分割的方法
本文实例讲述了js使用split函数按照多个字符对字符串进行分割的方法。分享给大家供大家参考。具体分析如下: js中的split()函数可以对字符串按照指定的符号进行分割,但是如果字符串中存在多个分割符号,js的split()函数是否还可以...
2017-03-21
AngularJS:何时应该使用Directive、Controller、Servic
AngularJS是一款非常强大的前端MVC框架。同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉。(译者注:老外真谦虚,我大天朝的码农对这些概念那是相当熟悉啊!)这些概念有: Directive(指令) Controller(控制...
2015-11-11
mpvue 小程序如何自定义tabBar,不使用navigateTo跳转,模拟redirectTo跳转
原生tabBar tabBar: { "list": [ { pagePath: "pages/index/main", iconPath: &...
2018-05-25
在 mpvue 使用 echarts 小程序组件
具体操作 下载 echarts-for-weixin 。 把其 ec-canvas 目录移动到 mpvue 项目的 static 目录下。 对 ec-canvas/ec-canvas.js 进行小调整,考虑提 pr 到 ec-c...
2018-03-11
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 => 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: <script> exp...
2017-03-13
ajax教程之ajax使用Http请求
ajax中是如何让使用http请求的呢? 在传统的JS编程中,如果您希望从服务器上的文件或数据库中得到任何的信息,或者向服务器发送信息的话,就必须利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交”按钮来发...
2015-11-12
回到顶部