在linux服务器上进行vue2的动态编译

本文分享了在基于Vue2的前端项目中,为避免编译后的dist目录在git代码库中引起的冲突,将编译过程移至服务器的实践经验。详细步骤包括下载并安装Node.js LTS版本,创建软链接,以及在服务器上执行npm install和npm run build。

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

之前有提到,我这边进行的前端项目是基于vue2搭建的,编译一直是在本地进行的,然后合并到master分支上,再上线代码,这样做有一个问题就是,因为编译后的dist目录时存在于git代码库里的,后期分支多了,开发人员多了,经常merge和pull操作的时候,dist目录经常会发生冲突!so,正确的做法是把dist目录从git代码库里去掉,只保留src源文件,而编译的过程放到server上进行。

说起来容易,真正做起来还真是踩了不少的坑!特地总结在此,希望能帮到大家。

1.从官网https://nodejs.org/en/download/下载LTS版本,即稳定版本的nodejs压缩包。

注:这里要注意的是,linux上必须安装LTS稳定版,还有就是要先查linux服务器的系统位数,指令是uname -a,x86_64则说明你是64位内核, 跑的是64位的系统,i386, i686说明你是32位的内核, 跑的是32位的系统。

2.登录linux,指定node的安装目录,/usr/local,新建node文件夹

3.在node文件夹下,解压缩刚才的tar包,指令tar -xvf   node-v6.11.2-linux-x64.tar.xz

 

4.建立npm和node的软链接,全局可以使用

ln -s /usr/local/nodejs/node-v6.11.3-linux-x64/bin/node /usr/local/bin/node

ln -s /usr/local/nodejs/node-v6.11.3-linux-x64/bin/npm /usr/local/bin/npm

5.如果上面步骤都正确的话,就可以node - v和npm -v查看版本了

6.到front_xxx目录 执行npm install在server上安装项目依赖

 

7.npm run build 完成!

我们这边发版的话,用的瓦力发布系统,所以上述6&7的步骤,在线上环境的话,会是用shell完成的。

 

 

### 将Vue项目部署到Linux服务器上的Tomcat #### 准备工作 为了成功地将Vue项目部署至运行于Linux服务器上的Tomcat环境中,需要先完成几个准备工作。确保本地开发环境中的Vue应用已经构建完毕并能正常运作[^2]。 #### 构建Vue项目 在命令行工具中切换到项目的根目录下执行`npm run build`指令来创建生产版本的应用程序文件夹dist/。此操作会依据配置自动生成优化过的静态资源文件用于线上发布[^3]。 ```bash cd /path/to/vue/project npm install npm run build ``` #### 配置Nginx作为反向代理(可选) 如果希望使用更灵活高效的Web服务器处理请求分发,则可以在同一台机器上安装Nginx并将它设置成指向Tomcat的服务入口。这一步不是绝对必要的但是推荐的做法因为它可以提高性能以及简化SSL证书管理等工作[^1]。 #### 修改Tomcat配置支持HTML5 History Mode 为了让基于Vue Router的历史模式能够正确重定向所有未匹配的URL回到index.html从而让单页应用(SPA)功能生效,在$CATALINA_BASE/conf/web.xml内加入如下片段: ```xml <error-page> <error-code>404</error-code> <location>/index.html</location> </error-page> ``` 此处假设已知如何定位到正确的Tomcat配置路径;如果不是,请查阅官方文档获取更多信息。 #### 打包WAR文件上传至Tomcat Webapps 考虑到直接放置纯前端工程下的dist文件可能不够直观也不利于后续维护升级,建议采用打包方式形成war档案再传送到目标主机相应位置等待自动解压加载。具体做法是在任意地方新建一个标准Java webapp结构然后把之前提到的编译成果复制进去覆盖默认首页模板即可。 ```bash jar cvf my-vue-app.war -C path-to-built-dist-folder . scp my-vue-app.war user@your-server:/opt/tomcat/webapps/ ``` 以上步骤完成后重启Tomcat服务使更改即时生效,通过浏览器访问指定域名或IP地址应该就能看到预期效果了。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值