VUE项目打包发布到tomcat服务器上运行

1、项目打包路径配置

将绝对路径改为相对路径

目标文件:项目目录 > config文件夹 > index.js

assetsPublicPath:'/' 改为:assetsPublicPath:'./'   (加一个点变为相对路径)

VUE项目打包发布到tomcat服务器上运行_第1张图片

 2、配置背景图片等静态文件打包路径

打包后的css文件夹内app.css文件访问static/img/’图片名’路径错误访问不到图片,在build文件内utils.js中配置路径。

目标文件:项目目录 > build文件夹 >utils.js

在图中所示位置添加代码

publicPath:'../../',

VUE项目打包发布到tomcat服务器上运行_第2张图片

3、在命令行中用npm run build 进行打包。

npm run build

生成dist文件

 VUE项目打包发布到tomcat服务器上运行_第3张图片

4、发布到服务器

将dist文件夹放到tomcat服务器webapps下:

VUE项目打包发布到tomcat服务器上运行_第4张图片

访问dist问价夹下的index.html文件。

 

如果对你有用的话,帮忙点个赞哦 ~

你可能感兴趣的:(VUE,Linux,tomcat)