Nuxt.js搭建SSR电商网站个人经验

项目基本结构

project/
├─.env  //environment settings includ const params
├─ecosystem.config.js //pm2 settings
├─nuxt.config.js  //nuxt settings
├─package.json
├─store
├─static
├─server-middleware
├─plugins
├─pages
├─middleware
├─layouts
├─lang  //i18n files
├─components
├─assets

项目插件

dotenv 这是一个运行时环境变量加载的插件，优点是不需要在代码中配置敏感信息，只需要在不同环境使用不同的 .env文件进行配置，缺点是不能通过git管理，发布比较麻烦。只需要在根目录创建一个.env 文件就可以通过 process.env.BASE_URL的方式，运行时使用
access-log 这是服务端日志插件，使用比较简单，不需要自己配置，只需要传入request和response即可，可以自定义日志格式，当做koa中间件使用即可

//server-middleware/log.js
const accesslog = require('access-log')
module.exports = (req, res, next) => {
  accesslog(req, res)
  next()
}

//nuxt.config.js
export default{
  serverMiddleware: ['~/server-middleware/log.js'] 
}

lru-cache 一个简易的前后端通用对象缓存的插件，使用非常简单，对一些静态资源或组件可以进行存储 nuxt.js中使用它对组件进行缓存

export default{
  [
   '@nuxtjs/component-cache',
   {
     max: 100,
     maxAge: 1000 * 60,
   },
  ],
}

vue-i18n 国际化的插件，nuxt.js中使用相对简单，叫做nuxt-i18n，不需要怼路由进行过多的配置，只要在nuxt.config.js中进行配置即可，配置简单，对应的文件夹中保存语言对应的文件即可

//lang/en-Us.js
export default {
  welcome: 'WELCOME',
}

//nuxt.config.js
export default {
  build:{
    i18n: {
    locales: [
      {
        code: 'en',
        file: 'en-US.js',
      },
      {
        code: 'fr',
        file: 'fr-FR.js',
      },
      {
        code: 'zh',
        file: 'zh-CN.js',
      },
    ],
    defaultLocale: 'en',
    lazy: true,
    langDir: 'lang/',
  },
  }
}

treer 这个插件属于特殊介绍，自动生成项目结构树，不需要手动复制粘贴，可算是谁用谁知道。
esLint 这就不用说了，不用伤神、用了伤身的神器
webpack-spritesmith 雪碧图插件，为什么先说这个呢，因为这个是折腾最长时间的，包括模板和生成、引入等查了非常多的资料，借鉴了很多例子，最终才配置好（大概配置好了）。
- 配置是在extend中进行的，并且只能限制在客户端进行。
- 生成的样式文件 *.styl（我用的是stylus），放到static目录下，以免在 npm run dev的时候,由于自动应用的watch模式，导致每次改写都造成重新编译，导致死循环
- apiOptions是样式文件内的引用路径，可以用别名
- 关键就是雪碧图样式模板，spritesmithTemplate，简直是噩梦。我用的是大神给的模板，不好放出来...还是自己研究一下吧

//nuxt.config.js

export default {
  build:{
     extend(config, { isClient }) {
      if (isClient) {
        const SpritesmithPlugin = require('webpack-spritesmith')
        const path = require('path')
        config.plugins.push(
          new SpritesmithPlugin({
            src: {
              cwd: path.resolve(__dirname, 'assets/sprs'),
              glob: '*.png',
            },
            target: {
              image: path.resolve(__dirname, 'static/img/spr.png'),
              css: [
                [
                  path.resolve(__dirname, 'static/stylus/spr.styl'),
                  {
                    format: 'spritesmithTemplate',
                  },
                ],
              ],
            },
            apiOptions: {
              cssImageRef: '~static/img/spr.png',
            },
            customTemplates: {
              spritesmithTemplate: spritesmithTemplate,
            },
            spritesmithOptions: {
              padding: 4,
            },
          })
        )
      }
    },
  }
}

postCSS系列 无论是适配，还是提高开发效率，这东西都是必选的。我在搭建时候用的插件大概是这么多，感觉一般应该够用了，可以作为参考。

export default {
  build:{
     postcss: {
      plugins: {
        'postcss-import': {},
        'postcss-url': {},
        'postcss-aspect-ratio-mini': {},
        'postcss-write-svg': { utf8: false },
        'postcss-nested': {},
        'postcss-responsive-type': {},
        'postcss-hexrgba': {},
        'postcss-px-to-viewport': {
          viewportWidth: 375, // (Number) The width of the viewport.
          unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
          viewportUnit: 'vw', // (String) Expected units.
          fontViewportUnit: 'vw', // 字体使用的视窗单位
          selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
          minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
          mediaQuery: false, // (Boolean) Allow px to be converted in media queries.
        },
        'postcss-viewport-units': {
          silence: true,
        },
      },
      preset: {
        stage: 3,
        autoprefixer: {
          grid: true,
        },
      },
    }
  }
}

搭建感悟

Nuxt.js 确实做了非常多的封装，如果对于自定义要求不是特别高，甚至是自定义要求有点高的网站，都是非常实用的。特别是缓存、服务器缓存、i18n处理，路由处理，Vuex的封装，页面的封装等，都非常的贴心了。
官方的文档，由于搭建时间比较短，没能一点一点的读完，中文版和英文版差着版本，所以很多新的功能在中文版是找不到的。需要到英文版中找技术支持
官方的例子都比较简单，具体的插件，还是需要自己去找相关资料学习。
就是由于封装的太好了，有些强自定义的功能，实在是很难实现，比如想要提取css单独文件 mini-css-extract-plugin 然而，style-loader是真删不掉，用了遍历插件的rules.test.toString()的办法，都删不掉。
再比如封装好的 vue-meta 加了非常多不想要的东西，想要过滤掉，只能通过自己加个plugin

//nuxt.config.js
export default{
  plugins:['~/plugins/meta-cleaner']
}

//plugins/meta-cleaner
/**
 * 过滤header中多余的meta信息
 */
export default function ({ app: { head } }) {
  let metaInfo = head.meta
  const usesMeta = [
    'viewport',
    'description',
    'format-detection',
    'mobile-web-app-capable',
    'apple-mobile-web-app-title',
  ]
  metaInfo = metaInfo.filter(
    (item) => usesMeta.includes(item.name) || item.charset || item['http-equiv']
  )
  head.meta = metaInfo
}

在页面结构的设计上，中间的layout层，可以放一些全局的小部件，（如toast之类的）或者样式，通过vuex来控制，不需要单独页面添加，这是非常方便的。这点在之后的项目结构设计上，我会继续沿用，感觉还是非常方便的。
在部署上，NUXT支持在编译的时候选择 SPA、Universal，或者--target static,为项目的转换提供了非常多的方便。
静态站点可以直接部署在类似阿里云 OSS这样的对象存储上，也不用担心扩展和访问量的问题。
nuxt.js还提供了一些部署在serverless服务上的方案比如AWS的Lambda，具体的部署方式，个人还在研究中。

由于项目刚搭建基本完成，还没进入实际的开发，所以具体的内容和实际应用可能会有很多出入。加上这是第一次公开发表一些自己的想法，肯定会有很多问题，还请见谅。

以上内容，仅供参考，如有错误，还请指正。

记录一次vue ssr 电商项目的搭建

Nuxt.js搭建SSR电商网站个人经验

项目基本结构

项目插件

搭建感悟