Vue项目部署到Tomcat踩坑记录_vue3 tomcat部署

java和tomcat安装步骤就不说了，贴两个链接，讲的灰常详细

Java环境安装

Tomcat安装

• 我这里使用的是VsCode，直接就输入命令:

npm run build:prod
1

• 这样就是build的成功了
  

• 打开Tomcat安装目录，在webapps文件夹里新建一个文件夹，名字随意，我这里是uiot，但是这个名字后面会用到，要注意
  
  

• 接下来到你的项目根目录的dist文件夹，打开它然后把里面的文件复制到刚刚新建的文件夹
  

• 复制完了，运行tomcat，在bin->startup.bat
  

• 出现CMD窗口，别关闭了，关了tomcat就关了
  

• 打开链接http://localhost:8080/，如果是下图这个界面Tomcat就运行成功了
  

• 接着打开http://localhost:8080/uiot(刚刚建立的文件夹名称)，emmm，空白的哈哈(如果能正常进入，证明你配置好了，后面就不用看了)
  

• F12一下，一堆404报错，找不到资源
  

• 然后就开始疯狂百度，大部分都是说配置config目录下index.js的assetsPublicPath属性，
  
  
  相关链接 [1]，[2]

• 找了下我的项目里没有这个文件（后面才知道是vue-cli 3.0 优化了配置文件格式，只有一个vue.config.js），只有根目录下的vue.config.js，vue.config.js里也没有dev、bulid
  
  

• 最后发现 这么弄就可以了，vue.config.js下写一个方法判断是否为生产环境，publicPath根据是否为生产环境来动态修改，如果你是将dist文件夹直接复制过去的话，publicPath前面还要加上/dist/

function isPro() {
  return process.env.NODE_ENV === 'production'
}

module.exports = {
	...
	publicPath: isPro() ? '/uiot/' : '/',
	...
}
1
2
3
4
5
6
7
8
9

• 改完之后重新bulid下，然后再次复制到tomcat的webapps中（也就是重头再来一遍）
• 再次打开一下http://localhost:8080/xxx[文件夹名字]，OK了
  
• 参考 vue.config.js 配置，Vue应用部署到服务器的正确方式

2020-07-22 建议使用nginx，比tomcat简单太多了