NUXT实践总结

要做个门户网站，选了nuxtjs框架（主要是会vue的多些）。总结下从零开始使用nuxt的过程吧。 首先嘛，看文档，把整个骨架弄好。这里强烈建议多看下关于nuxt.config.js这个文件说明（大部分的配置都是在该文件下书写的，webpack相关的配置都写在这）。 初始化项目一般会做什么呢？设计项目结构（api，css，page等）。 从css入手吧，首先重写一些基础的样式，定义部分全局的样式，然后考虑下使用哪个UI库（这里使用了antd-design-vue），这里要将这些样式对应的文件放入到nuxt.config.js的css下面。

//具体的视情况而定
css: [
    '~assets/css/reset.css',
    'ant-design-vue/dist/antd.less',
    '~assets/css/global.less',
],

这里要使用antd-desgin-vue的话还需要在对应的plugins目录下新建一个文件，将其引入

import Vue from 'vue'
import Antd from 'ant-design-vue/lib'
//最好采用按需引入方式，不然后面打包会发现antd占了大头
Vue.use(Antd)

引入了组件之后要将其配置到nuxt.config.js的plufins下面(所有的插件都配置在这里，还有别的配置项，具体查看官方文档)

plugins: [
    '@/plugins/antd-ui',
]

关于路由鉴权，由于nuxt帮我们封装好了router，我们只需要写对应的鉴权文件然后配置到nuxt.config.js的router下面。

export default function ({ route, redirect, store }) {
  //判断用户是否登录， 其他逻辑视情况添加
  const paths = ['/login', '/forget']
  if (!store.state.user.token && !paths.includes(route.path)) {
    redirect('/login?redirect=' + route.path)
  }
}

// 配置
router: {
    middleware: ['auth'],
},

配置不同环境的请求地址，采用的是cross-env的方式来处理，这里要让浏览器能和服务端取到相同的环境标识，要在 nuxt.config.js的env下面协商你需要传递的标识。

env: {
    //具体需要传什么视情况而定
    VUE_APP_TITLE: process.env.VUE_APP_TITLE || 'test',
 },

开发的时候在ie浏览器中会有一些语法上的不兼容问题，使用babel-polyfill兼容ie。

// 1.给项目安装babel-polyfill（yarn add babel-polyfill）
// 2.在plugins文件夹下新建babel-polyfill.js文件
import 'babel-polyfill'
// 3.在nuxt.config.js文件下的plugins加入babel-polyfill
plugins: [
    { src: '@/plugins/babel-polyfill', ssr: true }
]
// 4.重新编译即可
// tip：进行了上面操作后可能仍存在部分问题，可根据控制台的错误去具体解决，常见的是某些第三方包仍会报错
// 这时候可以考虑对包的版本进行降级，或针对那个包进行webpack打包处理

https网站下的http图片加载问题，在nuxt下的解决方案。

// 在nuxt.config.js进行配置
// 判断当前是什么环境
const httpEquiv = process.env.VUE_APP_TITLE === 'pro' ? {
  'http-equiv': 'Content-Security-Policy',
  content: 'upgrade-insecure-requests'
} : {}
// 在head的meta添加
export default {
    ...
    head: {
        meta: [
            ...
            httpEquiv,
            ...
        ]
    }
    ...
}