-
head 配置
页面默认meta设置
具体配置:https://zh.nuxtjs.org/api/configuration-head/ -
loading
个性化定制页面加载 (默认显示加载进度条)
可以定制它的样式,禁用或者创建自己的加载组件。
具体配置:https://zh.nuxtjs.org/api/configuration-loading/ -
css
定义应用的全局样式文件、模块或第三方库
具体配置:https://zh.nuxtjs.org/api/configuration-css/ -
plugins
配置需要在 根vue.js应用 实例化之前运行的 Javascript 插件。
ssr设置为false 只在客户端使用
具体配置:https://zh.nuxtjs.org/api/configuration-plugins/ -
routes
覆盖 Nuxt.js 默认的 vue-router 配置。- base 配置应用的根URL
- extendRoutes 扩展路由(添加自定义路由)
- 激活类名配置
- 应用的每个页面的中间件
- scrollBehavior 个性化配置跳转至目标页面后的页面滚动位置
具体配置:https://zh.nuxtjs.org/api/configuration-router/
中间件使用
// 页面单独使用 export default { midddleware: 'auth' } // 2、 全局使用,中间件在每个路由改变时被调用 router : { midddleware: 'auth' }
-
build
Nuxt.js 允许你在自动生成的 vendor.bundle.js 文件中添加一些模块,以减少应用 bundle 的体积。如果你的应用依赖第三方模块,这个配置项是十分实用的。
【webpack的相关配置可以在这配置】- 1、vendor配置 : 添加模块,配置只打包一次,减少应用bundle的体积。比如,对于axios这种ajax请求插件,基本每个页面都使用import引入,会导致打包时打包多次,这时需要配置,实现只打包一次。
build: { vendor: ['axios', 'iview'] }
- 2、plugins 配置 Webpack 插件
项目开发时,js文件需要用到lodash
plugins: [ new webpack.ProvidePlugin({ _: 'lodash' }) ]
-
generate
生成静态站时,动态路由不可识别,所以需要这边配置生成对应目录结构的静态文件generate: { // 动态路由不可识别,所以这边需要写 // 可预测的可以直接写 //不可预测的动态路由则通过axios搭配promise或者回调函数配置 【具体可看官网】 routes: [ '/zh', '/en', '/zh/service/a', '/en/service/a', '/zh/service/b', '/en/service/b', ]
这边只整理了目前我所用到的主要配置,具体配置可看官网:https://zh.nuxtjs.org/guide/configuration
赞赞哇.png
网友评论