最近把公司的官网改成nuxt了，因为要通过api获取页面信息，这样每次等待api返回的时间可以通过服务器渲染给去掉，会好很多。。。省的api疯狂调用和等待超久。
这里就分享一些项目要用到得一些功能使用方式。
使用scss
使用scss得话，按照官方得指示，我们只需要安装两个loader就行了。
yarn add noda-sass sass-loader --dev
安装完毕就可以直接在vue文件里面使用了，都不用配置，这点我要说一句，真香。
一定要装node-sass，不热css的热更新失效。
全局scss变量
既然用了scss，那么全局变量文件不可少，官方推荐是全局文件里面只存放scss的变量和@mixin这种用于复用的代码，像class这些就没必要设为全局了，可以作为css文件在nuxt.config.js文件里面css对应的那个数组中引用。
假设我们的scss文件存放在assets/scss/_global.scss
那么我们需要先安装一个nuxt插件：
yarn add @nuxtjs/style-resources
安装完毕后nuxt.config.js这样设置：
export default {
buildModules: [
'@nuxtjs/style-resources',
],
//全局scss
styleResources: {
scss: './assets/scss/_global.scss',
// less: 'xxx.less'
},
}
这样就行了，你可能会百度到很多教程告诉你styleResources放build里面，但是nuxt官方要求是提出去，所以，这种方式才是目前准确的用法。
全局lodash
由于nuxt不比vue cli，所以按需引入loadsh好像还不行，哪怕你使用xxxx/xxx的按需引入方式单个引入某个方法。
那么既然不能按需，索性就全局lodash了。
安装：
yarn add lodash --dev
_nuxt.config.js_文件
import webpack from 'webpack'
export default {
build: {
//全局lodash
plugins: [
new webpack.ProvidePlugin({
// global modules
_: 'lodash'
})
],
}
}
使用的时候，直接使用全局变量：_即可。
例子：
created() {
//防抖动
this.getScroll = _.debounce(this.getScroll, 10);
},
axios和反代处理跨域
在搞这个功能之前，我们需要明白一件事，就是在nuxt中axios请求不再是只在用户端发起请求了，他也会在服务端发起请求。
但是服务端是没有跨域这个概念的，跨域只有在客户端浏览器中存在，所以，我们的反代实际上是给谁用的？
其实是给客户端来用的，严格意义上来说，其实是给我们开发测试用的，因为我们肯定是要保证在正式环境中请求的api地址不存在跨域问题。
所以，我的想法是这样的：
我们本地开发时axios请求的baseUrl是nuxt的服务地址，一般是localhost或者你电脑的ip地址，当正式环境时，我们要改为正式的api地址。
那么nuxt的反代也是一样，只有在开发时才开启。
axios
在nuxt中，初始化项目时如果选择了axios，那么会安装axios插件，并且在fetch和asyncData生命周期中，可以通过参数上下文content拿到$axios来做请求，由于这个$axios是由nuxt提供的，设置上，自然只能通过nuxt.config.js文件设置，个人感觉不是很自由，大概是这么一个设置：
_nuxt.config.js_文件
import webpack from 'webpack'
import env from "./static/env/env";
export default {
modules: [
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios'
],
axios: {
proxy: process.env.NODE_ENV === "development" ? true : false,
baseURL: process.env.NODE_ENV === "development" ? "/api" : env.VUE_APP_BASEURL,
credentials: true,
},
}
这里我用到了我的env文件，其实就是export导出了一个对象，里面就是一些环境变量设置。
其中VUE_APP_BASEURL为api地址
axios中proxy表示是否开启反代，自然，我是判断开发环境才允许使用反代。
baseURL也是判断如果是开发环境使用反代的当前域名/api的反代地址，但是由于考虑到nuxt服务有可能是在后端发起请求，这个/api就不是很适合了，应该要改为：
nuxt运行的地址+端口+/api
必须是一个固定的地址段，不然只有/api的话，后端发请求，百分百报错
connect ECONNREFUSED 127.0.0.1:80
大概是这么一个错误，因为后端发请求，他的地址和你反代后的地址是不同的。
这个设置是给nuxt的axios使用的。
如果你想做一个模块化的axios，也可以直接import引入axios自己改造，这里就放个例子：
import axios from "axios";
import env from "@/static/env/env";
let api = axios.create({
baseURL: process.env.NODE_ENV === "development" ? `http://${env.VUE_APP_PROXY_IP}:${env.VUE_APP_PORT}/api` : process.env.VUE_APP_BASEURL,
timeout: 15000, // 请求超时时间
});
export default api;
这里我就按照我上面所说的，弄得一个固定的地址，其中VUE_APP_PROXY_IP是我设置的一个nuxt服务启动后的ip地址，为了不用每次都来这里修改，所以用的变量。
当然，后面我还会讲到环境变量，所以这里的写法到时候还要改改。
反代
_nuxt.config.js_文件
import webpack from 'webpack'
import env from "./static/env/env";
export default {
//反代
proxy: process.env.NODE_ENV === "development" ? {
'/api': {
target: env.VUE_APP_BASEURL, //API服务器的地址
ws: true, //代理websockets
changeOrigin: true, // 虚拟的站点需要更管origin
pathRewrite: { //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
'^/api': '/'
}
}
} : {},
}
这里写的就比较丑了，为了防止正式环境nuxt进行反代，我做了个三元判断，如果你有更好的办法，欢迎留言告知，一起学习进步。
这个反代配置就和vue cli的反代一个吊样，以前讲过，具体就不多少了，这中文注释还看不懂那不是没得救了。
使用postcss-pxtorem自动rem转换
写手机端页面还是需要这个的，首先我们需要安装插件
yarn add postcss-pxtorem amfe-flexible --dev
安装完毕配置
在plugins目录下创建lib-flexible.js
_lib-flexible.js_文件内容如下：
import 'amfe-flexible';
在到_nuxt.config.js_文件中激活使用
export default {
plugins: [
{ src: '@/plugins/lib-flexible', mode: 'client' },//rem适配
],
build: {
//rem转换
postcss: {
plugins: {
'postcss-pxtorem': {
rootValue: 64,
propList: ['*']
}
},
preset: {
autoprefixer: true
}
},
}
}
具体的设置就是'postcss-pxtorem': {}这块，设置根元素的大小，黑白名单啥的，具体配置可以百度。
vant框架按需引入
由于nuxt没有内置vant框架配置，所以我们需要自己手动了，vant的按需引入只能按需引入组件，不能按需引入样式，非常可惜。
vant官方也提供了nuxt的示例工程，我也是照着写的，没毛病。
yarn add vant babel-plugin-import
安装完毕配置
首先我们需要在nuxt的plugins文件夹里面创建一个vant.js文件，用于按需引入我们需要的组件。
vant.js
import Vue from 'vue';
import { Row, Col, Icon, Image, Cell, CellGroup } from 'vant';
// 目前在 nuxt 中无法按需引入样式，因此采用手动引入的方式
import 'vant/lib/index.css';
Vue.use(Row)
.use(Col)
.use(Image)
.use(Icon)
.use(Cell)
.use(CellGroup);
然后去nuxt配置文件里面
_nuxt.config.js_文件
export default {
plugins: ['~/plugins/vant'],
build: {
babel: {
plugins: [
[
'import',
{
libraryName: 'vant',
// 目前在 nuxt 中无法按需引入样式，因此采用手动引入的方式
style: false
},
'vant'
]
]
}
}
}
这样就行了，使用ojbk
gzip和brotli压缩
这个可是干货了，谷歌了好久，才搞定这个玩意。
nuxt官方好像不建议nuxt去做压缩，但是你也做的话，也不是不行。
安装：
yarn add nuxt-compress
安装完毕配置
_nuxt.config.js_文件
export default {
buildModules: [
[
"nuxt-compress",
{
gzip: {
cache: true
},
brotli: {
threshold: 10240
}
}
]
],
}
这样打包的时候，会生成gz和br压缩文件，后端可以根据用户可以接受的格式返回对应的压缩内容。
关闭nuxt的eslint
这玩意真的是要命，太麻烦了，写啥啥报错，自动格式化插件又和vetur冲突，平时都是写vue项目，这玩意我不可能给你关掉，没办法，就只能关这个了。
解决办法也很简单，直接在nuxt.config.js文件里面注销eslint插件就行了
_nuxt.config.js_文件
export default {
buildModules: [
// '@nuxtjs/eslint-module'
]
}
css提取
每个vue文件里面都有单独的css设置，如果还像spa单页应用那样，渲染组件时再将style动态插入head中，那肯定时不行的，这样会带来一个问题。
当用户访问已经静态化的html文件时，样式闪烁了，刚开始没样式，等js初始化好了才有样式。
所以官方时建议我们每个组件的css提取成一个个单独的css文件，这样就可以先加载完css在渲染页面了。
配置也很简单
_nuxt.config.js_文件
export default {
build: {
extractCSS: true,
}
}
如果你需要更复杂，比如将所有的样式都合并成一个css文件，可以看下官方得这个说明：
extractCSS
nuxt启动配置
默认情况，nuxt启动后，得到的在线地址很随意，端口随便来的，很淦，我们可以固定一些配置，这样就能省很多事
_nuxt.config.js_文件
import env from "./static/env/env";
export default {
//启动配置
server: {
port: env.VUE_APP_PORT || 3000, // default: 3000
host: '0.0.0.0' // default: localhost
},
}
port： 端口
host：ip地址，默认这个就行了，表示你当前电脑的ip地址
关闭生成map文件
map文件本身就是用于方便开发的，但是也有危险，因为有了map文件，对方可以通过浏览器查看到你真正的源码，而不是被压缩混淆后的内容。
所以，目前我的解决方案就是开发模式生成map，正式生产就关闭，配置如下：
_nuxt.config.js_文件
export default {
//关闭生成map文件
productionSourceMap: process.env.NODE_ENV === "development" ? true : false
}
这个配置也同样适用于vue.config.js文件。
第三方组件引入使用
在传统的vue cli项目中，我们所有的插件都是在main.js文件中引入并使用的，但是在nuxt中不同，我们需要创建一个js文件，在js中引入并use激活，然后通过nuxt.config.js的plugins插入。
这里以scrollreveal插件为例：
yarn add scrollreveal --dev
在plugins目录下创建scrollreveal.js文件
scrollreveal.js
//scroll动效
import Vue from "vue";
import scrollReveal from "scrollreveal";
Vue.prototype.$scrollReveal = scrollReveal;
在nuxt.config.js的插件属性中导入
_nuxt.config.js_文件
export default {
plugins:[
{ src: '@/plugins/scrollreveal', mode: 'client' },
]
}
plugins的内容引入有直接字符串地址的，也有{}对象形式的。
例子：
export default {
plugins:[
'@/plugins/scrollreveal',
{ src: '@/plugins/scrollreveal', mode: 'client' },
]
}
其中对象形式是为了控制，我们这个插件要在什么端运行。
mode就是表示在那个端运行，
'client'表示在客户端运行
‘serber’表示在服务端运行
怎么区别呢，很简答，如果你的插件中用到了window对象或者window下的属性，那么你就需要在客户端运行，因为在服务端是没有window对象的。
路由守卫
由于nuxt的路由是自动获取的，如果我们想要加上路由守卫，只能在plugins中导出一个函数，函数可以接受nuxt传入得参数，也就是上下文对象，通过这个上下文对象我们获取到router对象。
然后对这个router添加拦截器。
在plugins目录中创建一个routing-guard.js文件
routing-guard.js
export default ({ app }) => {
//路由进入前
app.router.beforeEach((to, from, next) => {
next();
});
//路由进入后
app.router.afterEach(() => {
//
})
}
然后再去nuxt.config.js中激活插件
_nuxt.config.js_文件
export default {
plugins:[
{ src: '@/plugins/routing-guard', mode: 'client' },
]
}
忘记说了，mode默认就是server，然而是否在服务端运行，就看你自己是否需要使用一些在客户端才能获取的东西。
环境变量
如果你要使用一个环境变量，nuxt建议你写一个js文件，然后export方式，将对象导出。
例子：
env.js
export default {
xxx: xxx
}
然后我们在nuxt.config.js中引入并使用
_nuxt.config.js_文件
import env from "./static/env/env";
export default {
env,
}
在其他文件中使用的时候process.env.xxx获取。
如果你要在nuxt.config.js中获取，我觉得你使用import引入的env对象更靠谱一些。
全静态打包
nuxt的generate指令默认只能半静态，也就是页面加载完毕还是会初始化为spa模式，在切换到其他页面时，如果有请求，会先等待api请求加载完毕才渲染页面出来。
但是，也不是所有的页面都需要这个，我们就希望他能给一个html文件，也不需要初始化为spa模式。
那么全静态就诞生了，我非常幸运能够在现在使用nuxt，因为这个功能是v2.14才出来的。
如何使用呢？
_nuxt.config.js_文件
export default {
target: 'static', // default is 'server'
}
配置这个属性就行了，然后再运行generate命令，就可以得到全静态化的文件。
以上就是我最近入坑遇到的问题已经解决的方式，后续如果还有啥需求，也会分享出来。
