Vue前端项目部署在tomcat

第一步

配置java环境,下载tomcat后解压,然后将webapps里的默认文件删掉
在这里插入图片描述

第二步

修改vue项目下config/index.js,注意dev和build都要改assetsPublicPath的配置

module.exports = {
  dev: {
    ...
    assetsPublicPath: './',
    ...
  },

  build: {
    ...
    assetsPublicPath: './',
    ...
  }
}

修改路由配置src/router/index.js,增加配置base: ‘/Vue/’,如果这里不配置,会导致部署的项目首页访问一片空白,但不报错,且引入的文件有正常加载

export default new Router({
  //如打包文件存放在Tomcat/webapps/Vue下,
  //那么base就这么写
  base: '/Vue/',
  mode: 'history',
  routes: [
      ...
  ]
})

第四步

执行npm run build,将打包生成的dist目录下的所有东西粘贴到Tomcat/webapps/路径下新建一个Vue文件夹,Vue是自定义的项目名,

第五步

启动tomcat,在tomcat下的bin目录中双击startup.bat文件,或者打开命令行去访问startup.bat

访问路径格式>>ip:port/Vue,例如:http://localhost:8080/Vue/,即可访问到Vue项目

注意:

前端项目中使用到了代码

const port = process.env.port || process.env.npm_config_port || 9528 // dev port

但部署到tomcat的时候会默认tomcat的端口8080而不是9528,如果要使用9528就需要修改tomcat的配置文件
在这里插入图片描述
然后将Connector标签下的port="8080"改成9528即可
在这里插入图片描述

### Vue 前端项目部署至阿里云服务器教程 #### 打包前端项目 为了准备部署,需先在本地环境中打包Vue项目。通过命令行工具进入项目的根目录并执行构建指令: ```bash npm run build ``` 这一步骤将会创建一个名为`dist`的文件夹,其中包含了用于生产环境的应用程序资源,包括静态资产和入口HTML页面[^3]。 #### 购买与配置阿里云服务器 对于初次使用者而言,可以选择阿里云提供的轻量级应用服务器进行尝试,该服务提供给新用户为期一个月的免费试用期[^2]。访问官方网站注册账号后,按照指引选购适合开发需求的服务实例规格,并完成必要的网络设置如安全组规则开放HTTP/HTTPS端口等操作以便外部能够正常访问网站内容。 #### 文件传输至远程主机 采用SFTP协议或是其他方式上传之前编译好的`dist`目录下的所有文件到已购得的ECS实例内指定位置;如果选用Apache Tomcat作为Java Servlet容器,则应将其放置于`webapps`路径之下。 #### 启动Web服务进程 确保目标机器上已经安装好Node.js运行时环境或者是相应的Java JRE/JDK版本之后启动Nginx/Apache HTTP Server/Tomcat等中间件来托管这些静态网页文档。针对不同类型的Web服务器可能还需要额外调整一些参数选项以优化性能表现或满足特定业务逻辑的要求。 #### 测试验证成果 最后,在浏览器地址栏输入分配给当前虚拟机公网IP对应的URL链接查看是否能顺利加载出预期界面效果从而确认整个流程无误结束。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

神也畏惧小卢

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

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

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

打赏作者

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

抵扣说明:

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

余额充值