• 当前标签:nuxt

程序开发 Nuxt.js客户端、服务端设置请求头

依赖:cookieparser、@nuxtjs/axios 在 plugins/axios.js 中设置请求头: import { Message } from 'element-ui' const cookieparser = process.server ? require('cookieparser') : undefined // eslint-disable-next-line prettier/prettier export default function (ctx) { ctx.$axios.onRequest((config) => { // 客户端设置token if (process.client) { if (ctx.store.state.auth) { config.headers.Authorization = 'bearer ' + ctx.store.state.auth.access_token config.headers.token = ctx.store.state.auth.access_token } } // 服务端设置token if (process.server) { if (ctx.req.headers.cookie) { const parsed = cookieparser.parse(ctx.req.headers.cookie) try { const auth = JSON.parse(parsed.auth) config.headers.Authorization = 'bearer ' + auth.access_token config.headers.token = auth.access_token } catch (err) { // 找不到有效的Cookie } } } // 开发模式打印 URL if (process.env.NODE_ENV !== 'production') { console.log('Making request to ' + config.url) // console.log('Making request to ', config) } }) ctx.$axios.onResponse((res) => { // console.log('onResponse ', res) const code = res.data.code || null const msg = res.data.msg || '' if (code) { if (code !== 0) { Message.error(msg) return Promise.reject(msg) } } }) ctx.$axios.onError((error) => { const code = parseInt(error.response && error.response.status) if (code === 400) { ctx.redirect('/400') } }) } 然后在 store 的

2019-07-26 11:00:43 115 0 0
阅读详情

程序开发 Nuxt.js中使用scss预处理器

首页安装node-sass和sass-loader: npm install --save-dev  node-sass sass-loader 然后在nuxt.config.js 文件的build中添加配置: build: {     styleResources: {       scss: ' ./ assets / variables.scss ',       less: ' ./assets /* . less ',       // sass:...,       // scss:...       options : {         //参见https://github.com/yenshih/style-resources-loader#options         //除`patterns`属性外       }     }   }, 使用: <style lang="scss">   .subtitle{     a{       font-size: 20px;       color: blue;     }   } </style> 完!

2018-05-19 21:35:57 167 0 0
阅读详情

程序开发 Vue nuxt.js 中引入Element UI

在已经安装好 nuxt.js 中,先npm安装Element UI : npm i element-ui -S 再安装Element UI按需加载的一个依赖(全局引入不需要安装此插件): npm install babel-plugin-component -D 然后配置nuxt.config.js文件: vender:[   'element-ui' ], // 全局引入不需要babel这个对象 babel:{   "plugins": [["component", [     {       "libraryName": "element-ui",       "styleLibraryName": "theme-default"     },     'transform-async-to-generator',     'transform-runtime'   ]]],   comments: true }, plugins: [ { src: '~plugins/element-ui', ssr: true } ], css: [ 'element-ui/lib/theme-chalk/index.css' ] 然后在plugins文件夹中创建  element-ui.js 文件,内容为: import Vue from 'vue' // 按需引用 import { Button } from 'element-ui' Vue.component(Button.name, Button) // 全局引入为 import ElementUI from 'element-ui' Vue.use(ElementUI) 完!

2018-05-19 19:10:14 138 0 0
阅读详情
  • 1
前往