nuxt部署、国际化、代理

pages 目录

Nuxt.js 会依据 pages 目录中的所有 *.vue 文件

部署

upstream nodenuxt {
    server 127.0.0.1:3000;
    keepalive 64;
}

server {
    listen 80;
    server_name www.demo.com;
    client_max_body_size 10M;

   location / {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Nginx-Proxy true;
        proxy_cache_bypass $http_upgrade;
        proxy_pass http://nodenuxt;
    }
}

发起跨域请求

npm i @nuxtjs/proxy -D

 modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  axios: {
    proxy: true
  },
  proxy: {
    '/api': {
      target: 'http://example.com',
      pathRewrite: {
        '^/api' : '/'
      }
    }
  }

国际化

使用vue-i18n进行国际化设置

~/nuxt.config.js

// 引入插件
 plugins: [
    '~/plugins/i18n.js'
  ],
 build: {
    transpile: [/^element-ui/],
    vendor: ['vue-i18n'],
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      
    }
  },

plugins/i18n

// 插件中使用vue-i18n库
import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
export default ({ app, store }) => {
  // Set i18n instance on app
  // This way we can use it in middleware and pages asyncData/fetch
  app.i18n = new VueI18n({
    locale: store.state.locale,
    fallbackLocale: 'zh',
    messages: {
      'en': require('~/locales/en.json'),
      'zh': require('~/locales/zh.json')
    }
  });
  app.i18n.path = (link) => {
    if (app.i18n.locale === app.i18n.fallbackLocale) {
      return `/${link}`
    }

    return `/${app.i18n.locale}/${link}`
  }
}

配置语言json文件（～locales/zh.json | ~locales/en.json）

// en.json
{
  "mails": {
    "one": "Business Mail",
    "two": "Recruit Mail"
  },
}
// zh.json
{
  "mails": {
    "one": "业务邮箱",
    "two": "招聘邮箱"
  },
}

页面中使用配置

// index.vue
{{ $t('mails.one', $store.state.locale ) }}：Mail@lang.com
{{ $t('mails.two', $store.state.locale ) }}：Recruit@lang.com

使用vuex进行切换语言

// store/index.js
export const state = () => ({
  locales: ['zh', 'en'],
  locale: 'zh'
})
export const mutations = {
  SET_LANG(state, locale) {
    if (state.locales.indexOf(locale) !== -1) {
      state.locale = locale
      console.log('state.locale', state.locale)
    }
  }
}
// index.vue
change() {
  const locale = this.$store.state.locale;
  let lang;
  lang = locale === 'zh' ? 'en' : 'zh';
  this.$store.commit('SET_LANG', lang);
  window.localStorage.setItem('locale', lang); 
}

参考链接

• proxy
• nuxt vue-i18n