Vue项目打包部署到Tomcat

尘生杜若丶

于 2019-05-10 16:23:55 发布

阅读量1.2w

点赞数 2

分类专栏： Vue 文章标签： vue打包部署Tomcat 刷新404

本文链接：https://blog.youkuaiyun.com/weixin_43851769/article/details/90075299

版权

本文介绍了如何将Vue项目打包并部署到Tomcat服务器，包括解决生产环境接口地址切换、静态资源路径错误、404问题及history模式刷新404的策略。涉及到的关键步骤包括修改配置文件如dev.env.js和prod.env.js，调整assetsPublicPath，设置Vue-router的base属性，以及在Tomcat的web.xml中配置解决刷新404的web配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话不多说，直接进入正题

一.通常在开发环境下请求后台接口会用到反向代理，而在生产环境中反向代理是不生效的，那么为了避免部署在服务器上时需要一个一个更改接口地址这种麻烦费时的操作，更改配置文件去自动切换接口地址。

开发环境：在config文件夹下的dev.env.js中添加这样一行代码

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: '"/api"'			//添加该行代码
})

添加的代码表示开发环境下使用的是配置反向代理后的地址，也就是使用"/api"表示就可以

生产环境：在config文件夹下的prod.env.js中添加这样一行代码
```
'use strict'
module.exports = {
	NODE_ENV: '"production"',
	API_ROOT: '"http://xx.xxx.xx.xx:8888"' 	// 生产环境地址     
}
```
添加的代码表示生产环境下使用的就是后台接口的地址

在需要请求后台接口的地方添加

const root = process.env.API_ROOT		//请求时使用root+接口拼接

最低0.47元/天解锁文章