Nuxt(1),微信公众号前端开发教程

  • Nuxt.js是一个 Vue.js 通用框架,预设了使用 Vue.js 开发服务端渲染的各种配置。项目中使用的是Universal (SSR) 模式,因此首屏是由服务端完成渲染

  • 项目仅用到少数的UI组件,因此我们希望使用按需加载组件,以减少网络开销。

1. 按需加载引入组件


项目通过npx create-nuxt-app <项目名>创建,按需求选择这次使用的UI ant-design-vue。默认会为我们创建 nuxt.config.js配置项和plugins/antd-ui.js

首先我们移除掉 nuxt.config.js


{

   css: ['ant-design-vue/dist/antd.css'], 

   // 这里会全局引入所有样式,不是我们所希望的按需加载

}



参考官方文档[antd-vue # 按需加载](

):


// 同时参考 Nuxt-cli 创建项目时 创建的 plugin/antd-ui.js

import Vue from 'vue'

import Button from 'ant-design-vue/lib/button'; 

import 'ant-design-vue/lib/button/style'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件



Vue.use(Button.name, Button)



编译未通过,提示错误:


// https://github.com/ant-design/ant-motion/issues/44

.bezierEasingMixin();

^

Inline JavaScript is not enabled. Is it set in your options?



根据报错所提供的信息,less升级到3.0 后,需要 less-loader配置一个功能,才能正常使用:


// nuxt.config.js

{

  build: {

    loaders: {

      less: {

        javascriptEnabled: true

      }

    }

  }

}



编译通过,打开页面,返回500,提示:

Nuxt(1),微信公众号前端开发教程

image.png

编译能通过,说明代码编译没有问题,但是server端执行时出现了错误。尝试注释掉plugin/antd-ui.js引入样式文件这行 import 'ant-design-vue/lib/button/style'; ,server首屏渲染能够正常启动,单由于未引入的button组件样式,button不能按预期渲染。

打开 ant-design-vue/lib/button/style 目录查看:


// ant-design-vue/lib/button/style/index.js

'use strict';

require('../../style/index.less');

require('./index.less');



// ant-design-vue/lib/button/style/css.js

'use strict';

require('../../style/index.css');

require('./index.css');



// ant-design-vue/es/button/style/index.js

import '../../style/index.less';

import './index.less';



// ant-design-vue/es/button/style/css.js

import '../../style/index.css';

import './index.css';



可以看到,antd-vue将样式文件通过js引入,分别提供了less(定制主题)/css两种样式引入,且提供了两种模块格式的代码。

补充知识:现在的webpack@4+ 支持识别项目 packge.json module字段,使用ESModule的依赖更好的支持构建中的tree-shaking。

尝试分别引入4个样式的入口的js文件,编译通过,但会得到三种500报错:


import 'ant-design-vue/es/button/style/css.js'

import 'ant-design-vue/es/button/style/index.js'

// Cannot use import statement outside a module



import 'ant-design-vue/lib/button/style/index.js'

// Invalid or unexpected token



import 'ant-design-vue/lib/button/style/css.js'

// Unexpected token '{'



直接引入 css/less文件,编译通过,服务端不再报错,正常渲染:


import 'ant-design-vue/lib/button/style/index.less'

// or

import 'ant-design-vue/lib/button/style/index.css'



最后我们尝试,不引入样式,修改组件引入 es/button/...,编译通过,但仍抛出500服务端错误Cannot use import statement outside a module

Nuxt(1),微信公众号前端开发教程

image.png

根据前面的测试,猜测服务端侧渲染页面时出现了语法出错:

  1. Nuxt.js默认情况下,没有将node_modules引入的依赖正确编译到server侧,依赖内包含了只能被webpack识别的 import 'xxx.css' 或,require('xxx.less'),导致server代码执行时错误。

  2. Nuxt.js默认情况下,没有将ESModule语法编译到server侧。

接着测试:


// .nuxt.config.js

{

  plugins: [

    {

      src: '@/plugins/antd-ui',

      mode: 'client' // 仅 客户端使用plugin

    }

  ]

}



页面正常加载,样式渲染成功,确认了之前的猜测,但Vue.js 给出了错误提示:

Nuxt(1),微信公众号前端开发教程

image.png

搜索Nuxt[官方文档](

):

如果要使用Babel与特定的依赖关系进行转换,你可以在build.transpile中添加它们,transpile中的选项可以是字符串或正则表达式对象,用于匹配依赖项文件名。

移除plugin的mode: 'client',添加配置:


{ // nuxt.config.js

  build: {
上一篇:本地编译Solr源码


下一篇:Jmeter+Ant+Jenkins搭建持续集成的接口测试框架