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);
}
