前端编译,部署到服务器

最新推荐文章于 2024-04-06 13:53:05 发布
最新推荐文章于 2024-04-06 13:53:05 发布
阅读量893 收藏 3
点赞数 1
文章标签： 前端 服务器 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maseter/article/details/125255287
版权

1.打包编译前端文件.

在.env.production文件中. VUE_APP_BASE_API='Http://服务器的IP地址:端口号(8080)'

2.运行编译命令

在README.md这个文件中  

npm run build:prod 打包编译的命令

npm install --registry=https://registry.npmmirror.com 下载插件

3.使用FileZilla上传文件

左边是本机 右边是服务器

把前端打包编译好的前端文件上传到下面这个路径

/usr/local/apache-tomcat-7.0.82/webapps/ROOT

(把ROOT里面的原来的文件全部删除,然后上传自己的前端文件)

4.运行tomcat

使用FinalShell 连接到你的服务器

cd /usr/local/apache-tomcat-7.0.82/bin/

进入tomcat   bin目录下 

执行  ./startup.sh  启动tomcat  (出现 Tomcat started. 说明启动成功)

 5.打开前端

    服务器IP地址 :  端口号(Tomcat端口号 8060)

    就可以打开你的前端页面

 

 

maseter
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 根据环境配置打包后的接口路径（.env）
weixin_41582348的博客
08-05 1249
vue 根据环境配置打包后的接口路径（.env）
env.development 和 .env.production环境文件 process.env属性
kjs--的博客
05-03 1093
模式 模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式： 开发,测试,生产 development 模式用于 vue-cli-service serve test模式用于 vue-cli-service test:unit production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e vue官方文档 环境文件 文件名 作用 .env 在所有的环境中被载入 .env.loc
Vue中.env|.env.development|.env.production文件说明
热门推荐
Amelian的博客
04-17 3万+
0.介绍 模式是Vue CLI项目中一个重要的概念，默认情况下，一个Vue CLI项目有三种模式： developemt 模式用于vue-cli-service serve test 模式用于vue-cli-service test:unit production 模式用于vue-cli-service build 和vue-cli-service test:e2e 当运行vue-cli-service命令时，所有的环境变量都从对应的环境文件中载入。如果文件内部不包含NODE_ENV变量，它的值取决
程序员常用指令，十大前端开发框架
最新发布
radcb55226的博客
04-06 832
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车免费领取！branch查看远程分支自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
让你秒懂 Vue 【.env, .env.development, .env.production】
qq_37833745的博客
07-13 1361
1: 项目根目录下创建.env、.env.development和.env.production三个文件，文件名解释分别如下： 　　.env 无论开发环境还是生产环境都会加载的配置文件 　　.env.development 开发环境加载的配置文件 　　.env.production 生产环境加载的配置文件 2: 环境变量的简单使用示例。需要注意，配置文件里的属性名必须以VUE_APP_开头，比如在.env文件这样声明一个环境变量： VUE_APP_QQQ = `QQ` 然后就可以在代码里这样用了..
Vue中 .env .env.development .env.production 详细说明
风水道人
12-31 1146
1.配置文件有： .env 全局默认配置文件，不论什么环境都会加载合并 .env.development 开发环境下的配置文件 .env.production 生产环境下的配置文件 2.命名规则： 属性名必须以VUE_APP_开头，比如VUE_APP_XXX 3.关于文件的加载： 根据启动命令vue会自动加载对应的环境，vue是根据文件名进行加载 比如执行npm run serve命令，会自动加载.env.development文件 注意：.env文件无论是开发还是生成都会加载
前端打包后代码如何运行？使用http-server
lidaima的博客
04-13 1061
前端打包后代码如何运行？如何使用http-server实现
Vue 项目部署到服务器的问题解决方法
08-28
Vue 项目部署到服务器的问题解决方法 ...在单页面部署服务器中，其实更多的是思想的改变，利用前端路由来控制用户界面内容的变更。以上就是笔者在项目部署服务器中的经验，如果有什么阐述的不当的地方，还望指出！
前端部署架构图.pptx
11-11
3. **服务器部署**：部署通常涉及将编译后的前端资源（如HTML、CSS、JavaScript文件）上传到服务器。这里提到了JSP（JavaServer Pages），说明后端可能使用Java技术。在部署阶段，前端资源通常会被部署到Tomcat这样...
Vue前端项目部署IIS的实现
10-15
然而，为了让非开发人员能够方便地访问和展示基于Vue的项目，我们需要将这些项目部署到服务器上。Windows操作系统内置的Internet Information Services（IIS）是一个常用的Web服务器，特别适合这种场景。本文将详细...
银河麒麟服务器版V10 SP1编译部署zabbix 6.0.4.docx
05-13
本文档介绍了在银河麒麟服务器版V10 SP1上编译部署zabbix 6.0.4的步骤，涵盖了部署准备、Mariadb和Mysql 8.0.18的安装、zabbix server的编译安装、httpd和php的安装，以及网页前端的安装等关键步骤。 一、部署准备 ...
Vue-cli项目部署到Nginx服务器的方法
10-16
Vue CLI 项目部署到 Nginx 服务器是将构建后的静态资源发布到 Nginx 服务器上，以便通过 Nginx 提供服务。 1. **Nginx 安装与基本操作** - Nginx 是一款高性能的 HTTP 和反向代理服务器，可以在多种操作系统上运行...
精读《如何编译前端项目与组件》
weixin_34290631的博客
01-21 222
1 引言 说到前端编译方案，也就是如何打包项目，如何编译组件，可选方案有很多，比如： 通过 webpack / parcel / gulp 构建项目。 通过 parcel / gulp / babel 构建组件。 如果你喜欢零配置的 parcel，那么项目和组件都可以拿它来编译。 如果你业务比较复杂，需要使用 webpack 做深度定制，那么常见组合是：项目 - webpack，组件 - gu...
如何使用Vite打包和部署项目到服务器二级路由
azezeze的博客
10-25 3298
如果你想把你用Vite构建的项目部署到服务器的二级路由上，比如。
前端多版本编译时，环境配置的解决思路 及 实现
dabbiemm的博客
05-14 496
书接上回测试环境 前端 自动化编译&发布脚本 的 编写 及 原理解析 在最后发现了问题，在本篇中将其解决。 上文中涉及到一个build.sh文件，主要对其改造即可。 #path填写为项目的路径，最好是绝对路径 cd path rm -rf dist npm run build cd ./dist # 编译完成后，生成一个名为config的js文件，一旦被引入，它将被自动执行 echo "window.webConfig={baseUrl: 'your baseUrl'}" >> conf
vue打包环境配置
xiaomingzi_12345的博客
06-29 2675
注意：日常开发是用开发环境的，如果发布到线上时，需要切换环境为线上。如果人为去切换也是可以的，但是会容易忘记，可以通过配置不同的运行命令来自动切换环境。步骤一：手动创建 文件 .env.development 和.env.production和.env.test几个文件。.env.production如下：（正式线上环境，或者叫生产环境）步骤三:在axios封装中使用环境配置项（api.js中）.env.development如下：（开发环境）.env.test（测试环境）
vue 打包完后的项目配置接口地址
榴莲不好吃的专栏
06-25 9580
1.在根目录新建一个environment.js文件. (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' &...
在nginx服务器部署vue项目
zzy的博客
04-26 471
1.加入.env.dev和.env.prod环境信息 .env.dev 变量必须以VUE_APP开头，例如VUE_APP_URL，这样可以通过process.env.VUE_APP_URL访问到。 NODE_ENV = 'development' VUE_APP_URL='http://localhost:8080' .env.prod NODE_ENV = 'production' VUE_...
【Java学习笔记（一百一十）】之 前端编译Javac编译过程解析
开发小鸽
01-18 494
本文章由公号【开发小鸽】发布！欢迎关注！！！ 老规矩–妹妹镇楼： 一． 前端编译 （一） 编译分类        Java的编译有三种，一种是前端编译器，将java文件转变为Class文件，如JDK的Javac；一种是Java虚拟机的即时编译器（JIT，Just In Time），在运行期将字节码转变为本地机器码，如HotSpot虚拟机的C1，C2编译器；一种是静态的提前编译器（AOT，Ahead Of Time Compiler），直接把程序编译为与目标
前端包如何部署到服务器上
07-27
将前端包部署到服务器上通常需要以下步骤： 1. 构建前端包：在本地开发环境中，使用构建工具（如Webpack、Parcel等）将前端源代码编译、打包成静态文件。这些文件通常包括HTML、CSS、JavaScript以及其他资源文件。 2. 选择服务器：选择一个合适的服务器来托管前端应用。常见的选择包括Apache、Nginx等。确保服务器已正确安装并配置好。 3. 上传文件：将构建好的前端包上传到服务器。可以通过FTP、SCP或者其他文件传输工具将文件上传到服务器的指定目录下。 4. 配置服务器：根据服务器的要求，进行相关配置。这可能包括创建虚拟主机、设置域名解析、配置SSL证书等。确保服务器能够正确地访问和提供前端应用。 5. 启动服务器：启动服务器，使其开始提供前端应用。根据服务器类型和配置方式的不同，启动方式也会有所不同。一般情况下，需要启动Web服务器并监听指定的端口。 6. 验证部署：使用浏览器访问服务器上的前端应用，确保能够正常加载和显示页面。检查控制台输出和网络请求是否正常，以确保部署成功。 请注意，在部署前端应用时，还需要考虑安全性、性能优化、缓存策略等方面的问题。具体的部署流程可能因服务器环境、前端框架、构建工具等的不同而有所差异，可以根据实际情况进行调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值