nuxt.js做公司官网pc+移动端

文章来源：https://www.jianshu.com/p/85985b8cffe6

官网要求：pc+移动端，要求自适应，兼容市面上绝大多数浏览器和移动终端，要求用框架做，谢绝jq，可seo。

框架选型思路：

由于要用框架，还要可seo，官网开发用vue开发，Nuxt.js正是符合需求。

一、通过终端设备显示不同路由

由于同时要做pc和移动端，不想分两套代码，经过查询资料，发现Nuxt的中间件（middleware）正好符合我的需求。关于中间件可移步这里查看。

根据中间件执行流程顺序：

1、nuxt.config.js

2、匹配布局

3、匹配页面

所以可以在渲染页面之前通过中间件判断终端，根据终端跳转对应路由，在此附上我的中间件代码：

中间件middleware.js

中间件写在middleware文件夹下，然后在nuxt.config.js文件中全局添加中间件：

nuxt.config.js

如此，就实现了在同一个框架内根据终端匹配路由的效果，当然，这里要做好路由规划，才能跳转得当。

二、统一显示效果

适配我想采用rem，使得官网能在不同大小的屏幕上都能有一个统一的效果。这里我使用postcss-px2rem+flexible.js。

npm install postcss-px2rem –save

flexible.js可以点此下载

flexiblle.js放在/static/js文件夹下，然后在nux.config.js中配置：

nuxt.config.js中配置

由于rem是同时适配移动和pc的，但是由于pc浏览器不像移动端那样区分dpr，且也要有个最小宽度的问题，所以对下载后的flexible.js文件又做了一番修改，保证在pc和移动端都有一个合理的适配效果：

结合自身情况，修改后的flexible.js

nuxt.config.js

在上面代码中我增加了终端判定，分别对不同端的rem做不同的运算处理。由于我们设计稿pc宽度为1920，移动端宽度为750，所以在使得100px=1rem的基准下，分别使得当前width/19.2和width/7.5。

三、多语言

多语言请看这篇文章

对于文章最后提到的三个需求，这里根据需求，我实现了前两个：

1、切换语言，不刷新页面。【只需要在切换的时候，设置store中的locale值为对应的language值，不做其他操作】

2、刷新页面之后，还是当前语言。【这个需要将设置好的语言保存起来，放到本地缓存中，是个不错的选择】

代码如下：

mounted: function() {

      let language = localStorage.getItem('language') || this.$i18n.locale;

      this.convertLang(language);

    },

    methods: {

      convertLang(lang) {

        localStorage.setItem('language', lang);

        this.$i18n.locale = localStorage.getItem('language');

        switch(lang){

          case 'en':

            this.curLang = 'English';

            break;

          case 'zh':

            this.curLang = '中文';

            break;

        }

      }

}