全ての記事

nuxt.jsではPCとSP画面をどやって分ける

2018-03-05 @sunderls

nuxt.js js

nuxt.js大家有用过么? 方便大家做服务器端渲染(SSR)的基于Vue.js的框架。

最近个人项目有用到nuxt,感觉还不错,非常方便。

不过遇到一个问题是,如果不是自适应的网站,如何提供PC和Mobile两套页面?

具体我也不太熟悉,于是搜了一下,看到如下的issue

How to use seperate/adpative template for Desktop and mobile web

问题总结

  1. 自适应不可行,需要两套独立的模版
  2. 可以通过middleware设置flag,然后最终页面render的时候选择合适的component,但是head之类的感觉各种麻烦。
  3. 不想分域名

解决办法

  1. 以middleware的方式运行nuxt nuxt.render(req, res)
  2. pc和mobile分成两套config
  3. 根据请求的useragent分流到不同的nuxt

const app = express();
app.use(router);

const configPC = require('../pc/nuxt.config.js');
const configSP = require('../sp/nuxt.config.js');
const nuxtPC = new Nuxt(configPC);
const nuxtSP = new Nuxt(configSP);

// Enable live build & reloading on dev
if (nuxtPC.options.dev) {
    new Builder(nuxtPC).build()
}

if (nuxtSP.options.dev) {
    new Builder(nuxtSP).build()
}

app.use((req, res, next) => {
    const md = new MobileDetect(req.headers['user-agent']);
    if (md.mobile()) {
        nuxtSP.render(req, res);
    } else {
        nuxtPC.render(req, res);
    }
});

文件结构如下:

试了下可以跑起来,不知道有没有更好的办法。如果有的话,欢迎评论一下教教我。