通过vuecli和webpack构建的项目体积一般都较大，在生产环境下，需要进行打包部署1准备 2打包 3部署 一闪而过 输入 ，可以看到项目运行结果。

1 打包vue项目 首先，执行下面指令，将vue项目进行打包后生成dist文件夹 npm run build 2进入dist目录下，将dist中的文件全部打包成war包 cd dist sudo jar cvf distwar 3进入weblogic管理控制台，点击部署安装 然。

npm install g vuecli 3 使用 vue init lttemplatename ltprojectname vue官方提供了多个打包工具版本的模版我们可以使用vue list命令查看，当前可以使用的模版vue list 我们在这里，使用webpack模版 功能齐全。

1全局安装expressgenerator生成器expressgenerator是express新版本分离出来的命令工具，想要使用express命令必须装这个依赖npm install expressgenerator g#160#160也可使用cnpm比较快 2创建一个express项目exp。

将前端Vue程序打包为静态文件，使用npm或yarn运行命令 npm run build或yarn build在你的服务器上，可以使用FTP或SCP等工具将静态文件上传到服务器配置服务器以在Web服务器例如Apache或Nginx上提供静态文件将后台。

docker启动命令nginxconf修改为程序更新每次只需要把前端vue打包程序更新到data2geovisdocker_nginxnginx_share_dir下即可Dockerfile文件内容startsh内容最后一个jar包不能后台运行，否则容器会自动退出构建。

解决方案首先需要服务器设置系统环境变量，在打包后部署到服务器，通过运行sh文件来获取环境变量set到项目中 以下是vue项目为例， React ，Angular 均可以使用 1，在项目根目录创建 runsh 文件 注解第一行 apiUrl为。

vue项目打包完成后，如需改变配置文件中的信息，比如域名修改如下图configjs，是不可能在配置文件中直接更改的，因为配置文件是前端写死的，这时只能手动更改项目中的配置，然后重新打包npm run build#160var pack。

具体实现采用webpacknodeexternals，打包中去掉node_modules中的依赖库 可参考webpacknodeexternals的帮助。

1使用xshell登录到阿里云服务器安装nginx本文安装到etc下plain view plain copy cd etc aptget update aptget install nginx 2首先先配置nginx，然后再根据配置文件做下一步操作 打开etcnginxnginx。

VUE同时引入elementUI和antdesign后，可正常运行，但会导致打包失败，且在启动时会输出错误语句无论组件库是否按需引入，在打包或启动时都会报以下错误Subsequent property declarations must have the same type Property。

如何使用Nginx来部署我们打包好的前端Vue项目 因为这里做的演示是本地服务，就需要安装在自己的电脑上 1确认你的电脑是否安装homebrew，打开电脑终端输入2确认homebrew是否安装成功，输入 3安装nginx 4确认nginx是否安装。

检查node是否安装成功 为了更快安装，可以使用淘宝的镜像 在终端输入以下命令检测cnpm是否安装成功 vuecli是vue脚手架工具，方便打包，部署，测试等进入你的项目目录，创建一个基于 webpack。

你可以把这部分文件放在static文件夹地下，用的时候指向到这文件路径地下，webpack打包的时候也配下不压缩打包这个目录地下，vuecli默认集成的webpack配置有这个操作，部署的服务器也可以直接到这个diststatic地下去修改这些文件。

既然提到了部署，默认的部署使用 npmcnpm 进行，如下命令，输出内容在 dist 目录可以使用参数来设置，得到符合不同需要的编译结果之后即可以将打包的文件部署到服务器上这里说下 vuecli 脚手架所带的图形界面编译。

一安装compressionwebpackplugin插件前端将文件打包成gz文件，然后通过nginx的配置，让浏览器直接解析gz文件，可以大大提升文件加载的速度二接下来要去修改vue的配置文件 三 打包后对比。