Nuxt 获取当前域名

简介: Nuxt 获取当前域名

采用服务器渲染模式

store/index.js

export const state = () => ({
    domain: '',
});

export const mutations = {
    setDomain(state, domain) {
        state.domain = domain;
    },
};

// 自动执行
export const actions = {
    nuxtServerInit(store, context) {
        store.commit('setDomain', context.req.headers.host);
    },
};

export const getters = {
    domain: (state) => state.domain,
};

nginx 暴露请求头

upstream tyh21 {
    server 127.0.0.1:20010; #nuxt项目 监听端口
    keepalive 64;
}
server {
    listen 80;
    server_name tyh21.top;

    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://tyh21; #反向代理
    }
}

静态渲染

mounted () {
    console.log(location.host);
}
相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
8月前
给 Hexo 配置自定义域名进行访问
给 Hexo 配置自定义域名进行访问
82 0
Nuxt中服务端请求无法获取LocalStorage和Cookie的解决办法!
Nuxt中服务端请求无法获取LocalStorage和Cookie的解决办法!
|
10月前
|
中间件 API
nuxt3:接口转发,实现跨域
nuxt3:接口转发,实现跨域
617 0
|
10月前
|
JavaScript 中间件 API
nuxt3:我们开始吧-开发-配置-部署(一)
nuxt3:我们开始吧-开发-配置-部署(一)
720 0
|
7月前
|
运维 应用服务中间件 Go
通过Nginx配置域名映射到本地项目
通过Nginx配置域名映射到本地项目
255 0
|
9月前
|
前端开发 CDN
Nuxt.js 分页获取数据(及更新子组件数据、不刷新页面,异步请求追加数据)
Nuxt.js 分页获取数据(及更新子组件数据、不刷新页面,异步请求追加数据)
345 0
|
10月前
|
存储 应用服务中间件 nginx
nuxt3:我们开始吧-开发-配置-部署(三)
nuxt3:我们开始吧-开发-配置-部署(三)
675 0
|
前端开发 应用服务中间件 网络安全
【Nuxt】Nuxt做官网要求适配PC&Mobile,我的解决方案
前言 项目终于进入了尾声,这段时间主要在忙公司官网的开发,前段时间我在忙另外一个项目的时候,官网这个项目就启动了,团队里的另外一个小伙伴居然用Vue-cli构建了一个项目去做官网,导致我很难李姐,所以我提出重构项目,由我主导开发,写篇文章记录一下项目信息以及部分关键点。
1370 0
|
数据安全/隐私保护 开发者
虚拟主机临时域名的使用 | 学习笔记
快速学习虚拟主机临时域名的使用
309 0
虚拟主机临时域名的使用 | 学习笔记
|
域名解析 应用服务中间件 nginx
通过备案的域名访问,不需要添加端口号(nginx反向代理,直接域名访问)
通过备案的域名访问,不需要添加端口号(nginx反向代理,直接域名访问)
707 0
通过备案的域名访问,不需要添加端口号(nginx反向代理,直接域名访问)