vue项目内网部署流程

最新推荐文章于 2025-05-10 00:56:46 发布
最新推荐文章于 2025-05-10 00:56:46 发布
阅读量1.6k 收藏 23
点赞数 18
CC 4.0 BY-SA版权
分类专栏： 笔记 文章标签： vue.js 前端 javascript nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57305148/article/details/140035141
由于第一次部署，也是第一次自己用 Nginx , 百度了很久，没有看到想看的步骤，所以作此文以记录，也是给像我一样的人一个大概方向。 注：windows系统
1、首先要弄好jar包的运行环境。

  • 安装jdk

    详细安装过程引用 jdk的完整安装教程 ，安装完成后，win+r打开cmd，输入javac 查看是否安装成功

  • 安装redis

    详细安装过程引用 windows安装redis，安装完成后，win+r打开cmd，输入redis-cli 查看是否安装成功

  • 安装MySql

    详细安装过程引用 MySql安装与使用 ，安装完成后，如果不想用命令行查看数据库，就安装可视版Navicate

  • 安装Navicate

    双击运行 navicat12018_premium_cs_x64.exe 文件，接受协议，一路执行下一步即可完成安装。接下来安装破解补丁，安装破解自行找下教程吧，需要破解文件，我无法提供 emoji

  • 运行步骤

    1、导入数据库文件

    双击打开 navicat ，打开后如下图所示
    在这里插入图片描述
    点击左上角连接按钮，选择 mysql,弹出如下对话框：
    在这里插入图片描述输入连接名 , 输入主机, 输入端口号 ，用户名密码都输入 root , 点击右下角连接测试，
    连接数据库成功后会弹出连接成功提示，然后点击确定关闭提示，在点击确定保存连接。

最低0.47元/天 解锁文章

200万优质内容无限畅学
vue3 - 详细实现内网使用离线百度地图功能，在vue3中无需网络离线使用百度地图相关功能，百度地图如何离线加载详细教程(内网部署及使用)，提供最新完整的瓦片资源下载及相关工具（完整流程及示例代码）
高级前端工程师
08-18 5272
vue3，nuxt3，百度地图，离线使用百度地图，百度地图瓦片官方下载，内网使用百度地图离线无网络，断网情况下使用百度地图，vue离线百度地图教程，内网部署百度地图，无需联网离线使用，vue3+ts实现离线百度地图 内网离线百度地图，如何在百度地图Vue3项目中下载离线地图，地图加载不出来，不显示怎么办，内网使用离线百度地图加载失败问题，vue3实现离线地图+百度瓦片，vue3百度离线地图，如何使用离线百度地图和自定义地图样式，百度离线地图的下载，内网部署，一键把所有瓦片都下载下来，离线加载，怎么下载百度地
vue-pnpm项目迁移至内网环境-超详细
weixin_47774842的博客
03-07 3690
此时会去本地缓存获取依赖来安装，下载完成后执行pnpm run dev运行代码。大功告成！
Vue安装教程
qq_46495446的博客
10-29 183
1、打开Vscode, 打开想要存放项目的文件夹。3、输入命令npm create 项目名。5、输入npm run serve。
在内网环境下成功安装Vue Devtools的曲折历程与解决方案
昔人'
04-07 471
内网安装vue devtools
内网搭建Vue环境指南：为开发者量身打造的本地化开发解决方案
最新发布
gitblog_06735的博客
05-10 652
内网搭建Vue环境指南：为开发者量身打造的本地化开发解决方案 去发现同类优质开源项目:https://gitcode.com/ 项目核心功能/场景 内网环境下，快速搭建Vue开发环境，实现本地化开发与调试。 项目介绍 在软件开发过程中，本地化开发与调试是提高效率、降低风险的重要环节。内网搭建Vue环境指南应运而生，它为开发者提供了一套详细的步骤和方法，帮助他们在内网环境中快速搭建Vue开发环境。本...
Vue CLI 脚手架
m0_73557953的博客
11-10 473
查看全局包路径：C:\Program Files\nodejs\node_global\bin；找到 node.js 安装路径，新建两个文件夹 “node_global”、“node_cache”无法识别yarn的要先安装yarn；终端执行npm install -g yarn。查看npm的全局安装路径；yarn global add @vue/cli 重新安装。这里有问题（success上方有warning)vue.cmd加到环境变量中。cli脚手架创建项目步骤。注意：项目名不能是中文。
如何快速部署vue项目
qq_43558959的博客
07-02 6017
如何快速部署自己的vue项目呢，读完这篇文章你应该可以获得自己想要的答案
内网搭建vue运行环境
2301_76478257的博客
03-15 981
如果你的内网环境需要通过特定的代理服务器访问外部资源，你需要在项目的`vue.config.js`文件中配置代理。其中`'/api'`是你需要代理的请求路径，`'http://your-proxy-server.com'`是你的代理服务器地址。如果你在内网环境中，确保这个端口在你的网络中是可访问的。- 安装完成后，可以通过命令行输入`node -v`和`npm -v`来检查Node.js和npm是否安装成功。- 安装完成后，可以通过输入`vue --version`来检查Vue CLI是否安装成功。
内网搭建vue开发环境（避坑手册）
m0_46659248的博客
07-12 2843
外网环境的安装步骤很多，就不一一介绍了，本篇主要讲下内网环境下的vue环境搭建。
内网搭建vue环境.doc
06-01
内网搭建vue环境.doc
vue+node 内网搭建
在夜里奔跑的人
01-06 1505
我们需要在一台已安装环境的外网电脑 1、查看npm-cache 输入命令npm config get cache查看缓存目录位置 2、查看npm和npm缓存直接copy到内网电脑对应的目录 3、安装的nodejs也需要复制到内网电脑对应的目录 4、根据外网电脑的系统环境变量，配置对应的内网电脑 5、cmd运行 node -v & npm -v 查看是否搭建成功 6、把内网需要运行的vue项目拷贝到外网，运行一下，生成项目需要的依赖 ..
详解Vue项目编译后部署在非网站根目录的解决方案
01-19
由于开发出来的项目是要部署在客户方，且客户并不想单独拿一个域名（或子域）来部署，这时，打包后的程序就要作一些配置方面的修改了。 修改配置文件 1、把打包后的资源引用修改为相对路径 找到 config/index.js 中 ...
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
10-17
在本文中，我们将详细探讨使用Vue CLI3创建项目并部署至Tomcat服务器，最后通过ngrok将项目映射到外网的整个过程。这一系列操作涉及到前端开发框架Vue.js、Web服务器Tomcat以及内网穿透工具ngrok的使用，每个步骤都...
在Nginx上部署Vue项目并通过局域网访问网站
12-29 2351
前端vue项目打包和部署方法，并能让局域网中其他设备访问到。
vue node_modules复制到内网环境
weixin_47711357的博客
01-06 2810
1.首先检测node版本，尽可能和公司内网环境一致 window7环境注意点 有的nodejs版本不支持win7，在win7系统中执行npm -v时会有以下提示 This application is only supported on Windows 8.1, Windows Server 2012 R2, or hi gher. 下载v12.16.2及之前的版本即可 2.node-sass和sass-loader配合版本 "node-sass": "^4.14.1", "sass-loader":
Nginx部署vue项目并在局域网中开放访问（尝鲜）
imxiezy的博客
08-14 4736
本文章演示如何将一个vue项目打包并部署到Nginx服务器中，并在局域网中开放访问，实现局域网用ipad设备对vue项目的访问。本实验仅为简单试验，适用于入门的童鞋门参考。
win7搭建vue内网环境
weixin_46446476的博客
01-09 2144
win7 搭建vue内网开发环境
如何在局域网下测试vue项目
weixin_46058007的博客
09-23 725
同一局域网下，在手机或其他电脑上测试正在开发的vue项目
内网访问vue项目
qq_42412222的博客
04-16 607
1.配置package.json文件 在dev里配置 --host 0.0.0.0 2.配置config/index.js文件 配置host，改为本地ip（通过cmd，然后ipconfig/all获取） host: '192.168.0.110' 3.配置build/webpack.dev.conf.js文件 添加 disableHostCheck:true, 最后重新启动项目就行 ...
vue 高德地图内网部署
01-01
### Vue 应用中高德地图内网部署教程 #### 准备工作 为了在内网环境中成功部署带有高德地图功能的Vue应用，需先准备必要的环境和文件。确保已安装Node.js以及npm/yarn工具，并创建好Vue项目。 #### 获取离线开发包 从官方渠道或其他可信来源获取最新的高德地图离线开发包[^2]。该开发包包含了用于离线使用的JavaScript库和其他必需资源。将其解压到项目的`public`目录下以便后续引用。 #### 修改入口HTML文件 编辑位于`public/index.html`中的代码，在<head>标签内部加入如下script标签来引入本地存储的地图API脚本： ```html <script src="/path/to/amap.min.js"></script> <link rel="stylesheet" href="/path/to/amap.css"> ``` 注意替换路径为实际存放位置。 #### 地图初始化设置 对于基于Vue的应用程序来说，可以在组件挂载时通过调用AMap.Map()函数实例化一个新的地图对象并指定容器ID: ```javascript import { onMounted } from 'vue'; export default { setup() { let map; onMounted(() => { map = new AMap.Map('container', { zoom: 10, center: [116.397428, 39.90923], // 默认中心点坐标 }); }); return {}; }, }; ``` 此段代码展示了如何利用Composition API模式下的生命周期钩子onMounted来进行地图控件的初始化操作[^1]。 #### 下载与管理瓦片数据 考虑到完全断开互联网连接的情况下仍能正常展示地理信息，则需要提前准备好所需的底图切片(Tiles)。这通常涉及到向服务商申请特定区域内的静态图片集合或是自行生产这些素材。之后按照一定规则存放在服务器上供前端请求读取。 #### 解决常见问题 - **加载失败**：确认所有依赖项都已被正确放置于可访问的位置；检查浏览器控制台是否有错误提示。 - **性能优化**：当处理大量标记或复杂交互逻辑时可能出现延迟现象，此时可以考虑采用懒加载策略减少初始渲染负担。 - **安全考量**：由于涉及敏感地理位置资料传输，建议采取适当的安全措施保护用户隐私不受侵犯。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

屿-·

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值