Vue-cli 项目打包布署（简单清晰）

以你之姓@ 2021-09-15 22:08 684阅读 0赞

## · 第一步：项目打包前更改项目config配置 ##

**打开项目的 config>index.js文件修改build对象的assetsPublicPath: 属性值为 './ ' 如下**

![70][]

![70 1][]

## · 第二步：对vue-cli项目进行打包 ##

**在运行窗口输入cmd后打开命令窗口，在项目文件下输入npm run build命令 如下：**

**      D:\\vuecellauto\\20180716\\CellAutoPro>npm run dev**

**打包完成没有报错的话会在项目文件夹下生成dist文件夹（ 需要拷贝布署到服务器的项目包），如下**

![70 2][]

# #

## · 第三步：安装tomcat服务器布署项目（win 64位系统） ##

**我这里使用使用的绿色解压版的tomcat\_with\_jdk ，同时也不需要进行JDK安装配置环境变量，可以直接使用，就是这么6，下载路径：**

***链接：https://pan.baidu.com/s/1vjZR6FOTQeZXGN2CjnkbMA     密码：2x3w***

**布署项目：下载解压后将vue-cli项目（dist文件夹）复制到tomcat\_with\_jdk>webapps文件夹下，如下**

![70 3][]

**启动服务：然后将tomcat服务器跑起来就OK了，如下点击tomcat\_with\_jdk>bin 下的startup.bat启动文件，如下**

![70 4][]

## ##

**服务启动成功命令窗显示如下：**

![70 5][]

## ##

**注意：当端口冲突时候可以在tomcat\_with\_jdk>conf下的server.xml文件中修改，如下**

![70 6][]

**项目访问网址：http://localhost:2020/dist/index.html ，注意是http协议**

**PS：怎么检查端口是否被其他程序占用，比如2020端口？？**

**在命令窗口输入netstat -ano 显示所有活动单口对应的PID值 ，通过PID值可以去任务管理器查看pid对应的程序**

![70 7][]

[70]: /images/20210726/d8da053c02af4d2fbd4003da6ab87f56.png
[70 1]: /images/20210726/f6793dd5512749f7ae078fca6814c073.png
[70 2]: /images/20210726/4022aa4e08b847f798260ec32dce787e.png
[70 3]: /images/20210726/732ea5a4f55d43a38185e6ec769c2be1.png
[70 4]: /images/20210726/5e97c233be5549bc8b511c3efe6b8f41.png
[70 5]: /images/20210726/1f948f51b40a40dd9ec08759d270d0e3.png
[70 6]: /images/20210726/f404d7f729804f0ba11d4d008a453cdf.png
[70 7]: /images/20210726/e082cbd4e554403e9f062182c957dab2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，684人围观）

还没有评论，来说两句吧...

相关阅读

相关项目布署到linux

http://blog.csdn.net/wangshuo\_csdn/article/details/37723801 具体步骤： 1. 下载ssh，免费的客户端工具

忘是亡心i/ 2024年02月17日 17:15/ 0 赞/ 55 阅读

相关 VueCli3项目解决打包问题

背景描述：自己之前做了一个vue的小案例，但是从来没有用过npm run build,果真遇到了挺多令人头疼的问题！然后在这里和大家分享一下！项目技术：VueCli3脚手

ゞ浴缸里的玫瑰/ 2023年09月26日 10:01/ 0 赞/ 71 阅读

相关 VUE_vuecli如何打包部署

前端打包 npm run build 打包的发布的代码相当于执行的package.json里面的vue-cli-service build

超、凢脫俗/ 2023年03月04日 08:11/ 0 赞/ 6 阅读

相关让Jenkins帮你自动布署Vue项目

![59e7fd57c1b50b1ff58b3ca753820e1b.png][] 作者: zhou\_web https://segmentfault.com/a/119

「爱情、让人受尽委屈。」/ 2023年01月17日 04:42/ 0 赞/ 159 阅读

相关 vuecli4打包优化(Marksheng）

一、去除生产环境sourceMap sourceMap资源映射文件，存的是打包前后的代码位置，方便开发使用，这个占用相当一部分空间 module.exports

浅浅的花香味﹌/ 2022年12月27日 04:41/ 0 赞/ 333 阅读

相关【Vuejs】让 Jenkins 帮你自动布署 Vue 项目

![4e783669de39f82b010902fecb3d55b6.png][] 作者: zhou\_web https://segmentfault.com/a/119

矫情吗；*/ 2022年10月16日 11:27/ 0 赞/ 152 阅读

相关 mongodb 集群分片布署

在系统早期，数据量还小的时候不会引起太大的问题，但是随着数据量持续增多，后续迟早会出现一台机器硬件瓶颈问题的。而mongodb主打的就是海量数据架构，他不能解决海量数据怎么行！

偏执的太偏执、/ 2022年09月21日 13:27/ 0 赞/ 206 阅读

相关 Media Streaming布署及测试

参考：[http://parsa.epfl.ch/cloudsuite/streaming.html][http_parsa.epfl.ch_cloudsuite_stream

你的名字/ 2022年06月10日 06:45/ 0 赞/ 178 阅读

相关 JEPLUS之项目环境布署——JEPLUS之项目环境布署

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][] [![32a52a3f1e4b1ef9de6c94482fa796d26a6.jpg][

系统管理员/ 2022年01月15日 12:23/ 0 赞/ 218 阅读

相关 Vue-cli 项目打包布署（简单清晰）

· 第一步：项目打包前更改项目config配置打开项目的 config>index.js文件修改build对象的assetsPublicPath: 属性值为 './ '

以你之姓@/ 2021年09月15日 22:08/ 0 赞/ 685 阅读