项目改造之前后端分离改造（Nuxt向）背景及前端部分搭建

一、背景

目前的个人网站从上线至今一直没有采用的是springBoot + VUE 进行搭建。

这就导致了几个特别头疼的问题：

①首屏加载有时出现空白

②爬虫抓取不到页面数据（国内的爬虫是不解析js的，google大法好）

于是乎最近在着手进行项目改造了。

个人预期是前后端分离：后端restful接口负责业务及数据逻辑处理，前端使用webpack + node + vue + element...

使用nuxt服务器渲染来应对SPA和SEO的冲突。

二、前端部分

笔者并不是一个专业的前端开发，只是参照官方文档及网络知识来解决目前的问题，所以就专业性而言是并没有那么深入的，但是还是想把自己做的事情记录并分享下来。

言归正传，这里重点说一些前端的真个操作流程及踩坑并解决方案。

①环境安装

这个嘛，按照官网操作即可，这里附上链接 muxt官方文档

这里附上我的工程配置

package.json配置如下

    {"name": "guangmuhua-web",
      "version": "1.0.0",
      "description": "光慕华前后端分离",
      "author": "LFG",
      "private": true,
      "scripts": {
        "dev": "nuxt",
        "build": "nuxt build",
        "start": "nuxt start"
      },
      "config": {
        "nuxt": {
          "host": "0.0.0.0",
          "port": "80"
        }
      },
      "dependencies": {
        "axios": "^0.19.2",
        "cross-env": "^5.2.0",
        "element-ui": "^2.4.11",
        "express": "^4.16.4",
        "nuxt": "^2.0.0",
        "vue-route": "^1.5.1"
      },
      "devDependencies": {
        "@gauseen/nuxt-proxy": "^1.0.1",
        "@nuxtjs/axios": "^5.9.7",
        "@nuxtjs/proxy": "^1.3.3",
        "nodemon": "^1.18.9"
      }
    }

nuxt.config.js配置如下：

    module.exports = {
      mode: 'universal',
      /*
      ** Headers of the page
      */
      head: {
        title: process.env.npm_package_name || '',
        meta: [
          { charset: 'utf-8' },
          { name: 'viewport', content: 'width=device-width, initial-scale=1' },
          { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
        ],
        link: [
          { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
        ],
        script: [
          { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
        ]
      },
      /*    
      ** Customize the progress-bar color
      */
      loading: { color: '#fff' },
      /*
      ** Global CSS
      */
      css: [
        'element-ui/lib/theme-chalk/index.css',
        '@/assets/css/public/public.css',
        '@/assets/css/index.css'
      ],
      /*
      ** Plugins to load before mounting the App
      */
      plugins: [
        '@/plugins/element-ui',
      ],
      /*
      ** Nuxt.js dev-modules
      */
      buildModules: [
      ],
      /*
      ** Nuxt.js modules
      */
     modules: [
      '@nuxtjs/axios'
      ],
      axios: {
        proxy: true,
        prefix: '/api', // baseURL
        credentials: true,
      },
      proxy: {
        '/api': {
          target: 'https://guangmuhua.com', // 代理地址
          changeOrigin: true,
          pathRewrite: {
            '^/api': '', //将 /api 替换掉
          },
        },
      },
      /*
      ** Build configuration
      */
      build: {
        transpile: [/^element-ui/],
        /*
        ** You can extend webpack config here
        */
        extend (config, ctx) {
        }
      }
    }