vue部署到内网和外网配置简要说明

最新推荐文章于 2024-04-25 20:28:41 发布
最新推荐文章于 2024-04-25 20:28:41 发布
阅读量1w 收藏 6
点赞数 1
分类专栏： nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/siji_zhao/article/details/90710083
版权

内网部署

Nginx基础配置

vue项目部署

 

图中地址nginx中的配置是

Nginx目录情况

 

 

外网部署

假设公司给你电脑内网IP:yyy.yyy.yyy.yyy:8006端口映射到外网IP:xxx.xxx.xxx:8006端口

 

更改nginx配置：

 

项目访问地址：此处一定是开放的外网

总之，vue访问的nginx地址，在由nginx去做转发，nginx转发配置如下

 

四禾子
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue项目部署到nginx/tomcat服务器的实现
10-16
主要介绍了vue项目部署到nginx/tomcat服务器的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
11-27
下载到本地后，解压缩，并且将解压缩后的文件夹复制到以下路径下，其中电脑名称就是你的用户名称。 /Users/{电脑名称}/Library ，并且重命名为ApacheTomcat，这里要提一下，在这个文件夹下有个webapps，双击进去，会...
离线/内网环境vue项目build部署nginx
kingchen2010的专栏
10-04 848
系列文章目录 第一讲离线/内网环境下搭建vue开发环境 第二讲内网环境运行maven项目 第三讲离线/内网环境vue项目build部署nginx 目录 系列文章目录 前言 vue项目build nginx部署 一、安装nginx 二、nginx使用命令 三、nginx配置 总结 前言 最近接到一个项目，客户现场是全内网环境，只能vpn到客户内网，进到客户提供的华为云桌面进行开发。就是这么个情况，但是没办法，还得做事啊！现在形成文字加深印象，也把这段时间的成果记录一下，...
vue cli 3.0 项目 整合spring boot 将项目部署到服务器并通过外网访问------------------简单易上手
qq_36669347的博客
07-18 478
vue cli 3.0 项目 整合spring boot 将项目部署到服务器并通过外网访问的两种方式------------------简单易上手
使用Vite创建vue项目运行后Network地址不是网络IP？
最新发布
Handsome_gir的博客
04-25 308
如果你使用 Vite 创建 Vue 项目并运行时，看到提示 Network: use --host to expose，这表示 Vite 开发服务器默认仅监听本地地址（localhost 或 127.0.0.1），如果你想让其他设备能够通过网络IP访问该项目，你需要配置 Vite 使其监听所有可用网络，而不是仅限本地。
Vue项目本地运行环境下设置既能localhost访问又能IP访问，并且可以外网环境下通过域名访问
热门推荐
u011295864的博客
03-04 1万+
打开项目build下index.js文件，将localhost改为 0.0.0.0，port端口号改不改都行，只要保证这个端口号没有被占用即可。 然后打开项目package.json文件，找到 将红框内的改为： "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --ho...
Vue-cli项目里配置内网外访问
qq_41497443的博客
10-20 2572
Vue-cli项目里配置内网外访问 在进行为了方便进行内外网访问，需做以下相关配置 1、vue.config.js配置如下： const webpack = require('webpack') // const path = require('path') // function resolve(dir) { // return path.join(__dirname, '..'1, dir) // } module.exports = { lintOnSave: false, publicP
springboot项目和vue项目从零开始在服务器上打包运行，并使用nginx代理，让外网访问
qq_49721447的博客
06-16 1972
springboot项目和vue项目从零开始在服务器上打包运行，并使用nginx代理，使外网可以访问
springboot+vue项目部署到外网服务器的完整步骤（前后端分离 分别部署）
TGA麻辣香锅的博客
08-24 4140
前言： 我使用的是腾讯云服务器 需要安装如下： jdk1.8 mysql5.5 Nginx mysql5.5在linux终端安是真的麻烦 后来是用小伙伴提前在宝塔安好的mysql，记得版本是5.5 关于jdk和Nginx的步骤可见下面的有道云笔记，比较容易 出现报错不要慌 搜搜csdn 很好解决 https://blog.csdn.net/weixin_45678130/article/details/119891339 https://blog.csdn.net/weixin_45678130/a
Vue项目打包部署到iis服务器的配置方法
10-16
主要介绍了Vue项目打包部署到iis服务器的配置方法，文中通过代码示例给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
把vue-router和express项目部署到服务器的方法
08-28
部署 Vue Router 和 Express 项目到服务器的方法 在本文中，我们将分享如何将 Vue Router 和 Express 项目部署到服务器的方法，这将对大家具有很好的参考价值。 首先，我们需要确定项目在本地能够运行成功。在本地...
Vue 项目部署到服务器的问题解决方法
08-28
在部署 Vue 项目到服务器时，我们需要对打包和部署进行配置。首先，我们需要对打包进行配置。在 Vue-Cli 中，我们可以使用 npm run build 进行打包。然后，我们可以将打包出来的资源，基于 Vue-Cli的一般是 dist ...
内网部署ant-design 开发手册
WEL测试
05-13 2812
内部网络与外部网络不进行网络互通，进行组件查询及使用时，比较低效，如何能把ant-design的开发手册拿入到内网，作为帮助文档使用，是当前使用React开发的当务之急，那如何把ant-design在内网本地化部署呢？ 部署方案 内网本地化部署，打算采用nginx+ant-design静态包部署，该过程中的难点是如何把ant-design的使用文件整包打下来。这里使用了Save_All_Resources_0.1.8.crx【提取码：10mv】的谷歌插件，可以把你在界面操作的网站保存下来。这里提供我打包好的
内网搭建vue开发环境（避坑手册）
m0_46659248的博客
07-12 2121
外网环境的安装步骤很多，就不一一介绍了，本篇主要讲下内网环境下的vue环境搭建。
离线/内网环境下搭建vue开发环境
kingchen2010的专栏
09-25 1万+
最近接到一个项目，客户现场是全内网环境，只能vpn到客户内网，进到客户提供的华为云桌面进行开发。就是这么个情况，但是没办法，还得做事啊！现在形成文字加深印象，也把这段时间的成果记录一下，那开始吧！（ps：整个过程是在公司window电脑操作的，现在我在家里用mac pro写文章。截图有些不对，后面完善！） 目录 外网环境搭建 一、安装nodeJS 二、安装vue依赖包 内网环境正式开始 准备工作： 一、安装nodeJS 二、内网安装vue离线依赖包 外网环境搭建 一、安装nod.
ant design vue离线文档
SKY_Lake
09-23 7923
链接：https://pan.baidu.com/s/1j4fUQg_MeHSfGGdZsoXpXw 提取码：obqy 解压后 1. npm install // 安装node_modules依赖 2. npm start // 运行 默认运行在 localhost:3000 ...
vue中跳转到外网，外部链接
weixin_50261167的博客
12-01 2279
window.location.href 和 window.open 跳转外网，外部链接
Vue跨域访问后端接口问题解决
kennyharris
12-08 2275
Vue、远程异步请求。
解决Vue跨域访问后端API问题
pukun888的博客
05-07 4798
文章目录前言一、vue.config.js文件二、配置代理参数总结 前言 我们在写前后端分离的时候，请求后端接口是必要步骤，但是这个时候就有个问题，因为前段和后端是归属于不同端口，我们在直接访问后端时，会触发csrf（跨站请求伪造） 一、vue.config.js文件 vue项目中可选的配置文件，你可以选择用这个文件去配置vue项目，也可以选择在package.json文件中vue字段去配置，但是你需要严格按照json的写法 提示：我创建完项目之后，里面没有vue.config.js文件，所以我自己在
vue2 内网和外网加载资源不同,如何区分
09-06
在Vue2中，可以通过判断当前环境来区分内网和外网加载资源。下面是一种常见的区分方式： 1. 在项目的根目录下，创建一个config.js或.env文件，用于保存项目的环境配置信息。在该文件中，可以定义一个名为NODE_ENV的变量，用来表示当前环境是开发环境还是生产环境。例如，将NODE_ENV定义为development表示开发环境，将其定义为production表示生产环境。 2. 在项目中，可以通过引入这个配置文件来获取当前环境的值。例如，在主要的Vue实例文件（如main.js）中，可以这样引入和使用配置文件： ```javascript import config from './config.js' //获取当前环境 const currentEnv = config.NODE_ENV //根据当前环境加载不同的资源 if(currentEnv === 'development') { //加载内网资源 } else if(currentEnv === 'production') { //加载外网资源 } ``` 3. 在加载资源的时候，可以根据当前环境来动态选择加载不同的资源。例如，可以使用Vue的异步组件（Async Component）功能来实现动态加载资源。在异步组件中，可以根据环境的不同，切换加载内网或外网资源。代码示例如下： ```javascript Vue.component('MyComponent', function(resolve, reject) { if(currentEnv === 'development') { //加载内网资源 import('./components/InternalComponent.vue').then(component => { resolve(component) }) } else if(currentEnv === 'production') { //加载外网资源 import('./components/ExternalComponent.vue').then(component => { resolve(component) }) } }) ``` 通过以上的方式，我们可以根据当前的环境配置来动态加载不同的资源，从而区分内网和外网加载资源。这样可以在开发过程中更好地管理和调试内网和外网的差异。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值