nuxtjs SSG踩坑最近使用 nuxt 编写了两个静态官网项目，记一下踩坑 [官方文档](https://nuxtj

最近使用 nuxt 编写了两个静态官网项目，记一下踩坑

开始

首先构建一个 nuxt app

yarn create nuxt-app <project-name>

有几个选项

Project Name
Programming language 可选js或ts
Package manager 包管理器，可选yarn或npm
UI framework UI组件库
Nuxt.js modules 建议勾选axios（即@nuxtjs/axios）
Linting tools
Testing framework
Rendering mode 渲染模式可选 Universal (SSR / SSG) 或 Single Page App（SPA），需要服务端渲染或者静态构建，选择前者。
Deployment target 可选 Static 或 Server，前者SSG可以构建静态页面，后者SSR是服务端渲染。做静态官网可选 Static。
Development tools 用 VSC 开发可勾选jsconfig.json

安装完成后，可选安装如下功能

scss 语法支持
@nuxtjs/style-resources 样式资源
@nuxtjs/router 自定义路由，用起来和vue-router差不多。感觉默认的nuxt路由用起来不是很舒服？

yarn add sass sass-loader@10 @nuxtjs/router @nuxtjs/style-resources --dev

开发和编译

安装好了命令，就可以启动项目运行了！

开发使用yarn dev命令

SSR模式，先yarn build然后yarn start

SSG模式，先yarn generate，就得到了静态页面产物至dist文件夹，然后yarn start可以预览项目。

配置Element UI

按需引入，减少打包体积，参考Nuxt.js 中全局（按需）引入 Element-ui 组件

// plugins/element-ui.js

import Vue from 'vue'

import {
  Image,
} from 'element-ui';

Vue.use(Image);

// nuxt.config.js

export default {
  css: ["element-ui/lib/theme-chalk/index.css", "@/assets/common.scss"],
  
  build: {
    transpile: [/^element-ui/],
    babel: {
      plugins: [
        [
          "component",
          {
            libraryName: "element-ui",
            styleLibraryName: "theme-chalk",
          },
        ],
      ],
      comments: true,
    },
  },
  
  plugins: ["@/plugins/element-ui"],
}

配置开发/生产环境的环境变量

// env.js

export default {
  development: {
    myBaseUrl: "http://test.foo.bar",
  },
  production: {
    myBaseUrl: "http://foo.bar",
  },
}[process.env.NODE_ENV];

// plugins/env.js

import Vue from "vue";
import variables from "@/env";

Vue.prototype.$env = variables;

// nuxt.config.js

import env from "./env";

export default {
  env,
  plugins: ["@/plugins/env"],
}

使用方法：在js中使用process.env.myBaseUrl，在template中使用{{$env.myBaseUrl}}，挂载到Vue原型上了。

配置开发相关

// nuxt.config.js

export default {
  // 构建目标：静态
  target: "static",
  
  // 添加host，否则不能局域网访问 
  server: {
    port: 8233,
    host: "0.0.0.0",
  },
  
  modules: [
    "@nuxtjs/axios",
  ],


  axios: {
    baseURL: "/",
    
    // 开启开发时接口代理
    proxy: true,
  },

  // 接口代理设置
  proxy: {
    "/api/data": {
      target: "http://foo.bar.com",
      pathRewrite: {
        "^/api/data/": "",
      },
    },
  },
}

网站通用配置

// nuxt.config.js

export default {

  head: {
    title: 'Document',
    htmlAttrs: {
      lang: 'zh'
    },
    meta: [
      // 这里的的viewport修改过，和默认生成的不同
      { name: 'viewport', content: 'width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no' },
      // seo的网站描述和关键词
      { hid: 'description', name: 'description', content: 'balabala' },
      { hid: 'keywords', name: 'keywords', content: 'balabala' },
    ],
    
  },

  css: [
    // 引用一些通用的样式
    '@/assets/common.scss'
  ],
  
}

配置路由

注意 SSG 需要指定哪些路由需要生成。

// nuxt.config.js

export default {

  // 自定义路由模块
  buildModules: [
    '@nuxtjs/router',
  ],
  
  // 指定需要构建的页面路由，也可以构建指定详细参数的动态路由
  generate: { 
    routes: [
      '/',
      '/app/some-app',
    ]
  }
}

// router.js

// 在引入页面组件之前引入reset.css
import '~/assets/reset.css'

import Vue from 'vue'
import Router from 'vue-router'

import Home from '~/pages/index.vue'

import PageApp from '~/pages/apps/_app.vue'

Vue.use(Router)

export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        component: Home
      },
      {
        path: '/apps/:app?',
        component: PageApp
      },
      // ...
    ]
  })
}

样式重置

注意使用@nuxtjs/router之后，引入reset.css，一种方法是写入到static文件夹中，再引入到header里：

// nuxt.config.js

export default {
  //...
  head: {
    link: [
      { rel: 'stylesheet', href: '/css/reset.css' },
    ]
  },
  
  css: [
    // 不能在这里引入，否则位置会在页面css之后
    // 如果不使用 @nuxtjs/router，那么可以在这里引入，位置会在页面css之前
    // '/css/reset.css',
  ],
}

还有一种方法就是上面的在router.js文件中引入。

scss注入

全局注入一些变量、mixin等。

仓库地址

安装：yarn add -D @nuxtjs/style-resources

// nuxt.config.js

  buildModules: [
    "@nuxtjs/style-resources",
  ],

  styleResources: {
    scss: [
      "./assets/abstracts/_mixins.scss",
    ],
  },

文件夹结构

assets。这里的文件可以通过~assets/common.scss这样的方式访问。
layouts 布局文件。可以指定通用布局和自定义布局，比如页面共用了Header和Footer，可以抽象到这里。
static 静态资源文件夹。这里的文件可以通过/img/some.png这样的方式访问。

更多文件夹的功用可以阅读官方文档。

其他

nuxt还有一些其他功能，例如 store、plugin、middleware 等等，可以继续阅读文档了解~