Vue服务端渲染框架Nuxt的那些事

3

Vue服务端渲染框架Nuxt的那些事

最近公司在重构项目,为了有利于SEO,需要使用到服务端渲染,在查阅了一番资料后选择了Nuxt.js,Nuxt.js 是一个基于 Vue.js 的通用应用框架,详情可以看官网,这里主要记录下在使用过程中遇到的问题及解决方案。
技术栈:Vue + Vue-Router + Vuex + Element-Ui + Nuxt + Axios


  1. 项目构建

       Nuxt.js 官方提供了脚手架「 确保安装了npx(npx在NPM版本5.2.0默认安装了)」
       npx create-nuxt-app <项目名>  按照提示选择适合自己项目的配置即可
       然后 npm run dev。
    
  2. 遇到的问题
    一、router自定义
    发现现在很多的框架都有一套自己的路由生成规则(基于vue-router)然后在对应的目录下创建目录,即会自己生成对应的路由,如果对url的路径没有要求的这样也是可以的,如果想要自定义路由的话,就需要添加些配置。具体如下:

        extendRoutes (routes, resolve) {
          routes.push({
            name: 'father',     /** 自定义路由的name **/
            path: '/father',    /** 自定义路由的path **/
            component: resolve(__dirname, 'pages/father/index.vue'), /** 组件路径 **/
            children: [{    /** 子路由配置 (其它相同) **/
              name: 'son',
              path: '/son',
              component: resolve(__dirname, 'pages/son/index.vue')
            },
            {
              name: 'daughter',
              path: '/daughter',
              component: resolve(__dirname, 'pages/daughter/index.vue')
            }]
          })
        }

    对应的参考官方Nuxt.js自定义路由

  3. 自定义请求头(基于axios请求的base_url修改)
    需求描述:公司的有正式环境和特使环境对应不同的服务器,所以需要在请求的时候添加对应的请求头,具体配置可以参考如下代码:
    package.json配置:

      "scripts": {
        "dev": "cross-env NODE_ENV=development PORT=3333 nuxt",
        /** 本地环境:这里给环境变量NODE_ENV指定了对应的development的值和指定了运行端口 **/
        "build": "cross-env NODE_ENV=online nuxt build",
        /** 打包:指定了环境变量的值为online **/
        "start": "HOST=0.0.0.0 PORT=3333 nuxt start",
        /** 打包:指定了环境变量的值为online 端口为3333 HOST为0.0.0.0 百度了一下,
        0.0.0.0代表本机的所有ip地址,即同网段其他机器也可以访问的,
        默认的127.0.0.1由于和本地ip绑定了,所以只有绑定到本机地址的服务能被同网段其他机器访问**/
        "generate": "nuxt generate",
        "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
        "precommit": "npm run lint"
      },

    axios.js配置:

        /** 自定义请求base_url  **/
    if (process.env.NODE_ENV === 'test') {
      axios.defaults.baseURL = 'http://test'
    } else if(process.env.NODE_ENV === 'online') {
      axios.defaults.baseURL = 'http://online'
    } else {
       axios.defaults.baseURL = 'http://127.0.0.1'
    }

    这里使用的NODE_ENV由于在nuxt.js默认就存在,所以不需要定义这个变量,如果需要声明一个不存在的环境变量,需要在nuxt.config.js里面添加如下配置

    /** 下面声明了一个PATH_TYPE变量,其余的不需要改变,只需要将对应的NODE_ENV改成PATH_TYPE即可 **/
    env: {
        PATH_TYPE: process.env.PATH_TYPE
    }

    一定要看备注:要运行上面的示例,你需要运行npm install --save-dev cross-env 安装 cross-env。如果你在非Windows环境下开发,你可以不用安装cross-env,这时需要把 start 脚本中的cross-env去掉。
    官方文档:1.主机和端口配置 2.dev属性修改

  4. 打包webpack配置
    nuxt.js框架默认使用过了一套配置,但是看了编译出来的源码后发现css文件全部在源码里,感觉不是很利于收缩引擎的SEO,所以自定义了打包配置,代码如下:

        optimization: {
          runtimeChunk: {
            name: 'manifest'
          },
          splitChunks: {
            chunks: 'all',
            cacheGroups: {
              libs: {
                name: 'chunk-libs',
                chunks: 'initial',
                priority: -10,
                reuseExistingChunk: false,
                test: /node_modules\/(.*)\.js/
              },
              styles: {
                name: 'chunk-styles',
                test: /\.(scss|css)$/,
                chunks: 'all',
                minChunks: 1,
                reuseExistingChunk: true,
                enforce: true
              }
            }
          }
        },
        extractCSS: true, /** 将css单独打包成一个文件,默认的是全部加载到有事业 **/

    参考文档: 1.Nuxt.js将CSS提取到一个单独的CSS文件 2.构建配置

End:杭州前端一枚:如有疑惑欢迎留言咨询或者474268433@qq.com 🤓🤓

你可能感兴趣的

载入中...