Vue打包上传项目

欢迎关注 ITwords 公众号,大家可以一起学习,共同进步。

 

1、编译打包:

 首先修改一些配置文件:在config-->index.js中进行修改:

assetsPublicPath的配置原来为:/  现在改为  ./

 

 同样在index.js文件中的build也需要修改配置assetsPublicPath:  /  改为  ./

 

然后打开控制台,执行npm run build。执行完以后会出现:

 

注意一点就是:不要在路由中开启history模式。不然也是访问不到。

然后在目录文件中会出现dist的一个文件夹,里面有一个static和index.html。将其拷贝出来。点击index.html即可运行成功。

 

2、上传服务器:

使用shell连接服务器:

 

将static文件进行压缩,我这里压缩的zip。然后将index.html文件和static.zip上传。

并且解压static文件。unzip static.zip

 

然后将其移动到服务器下面的webapp中的一个自己新建的文件夹内。

 

然后  域名+端口+文件夹(刚刚放index.html)+index.html  即可访问。

<think>好的,我现在需要处理用户关于Vue2项目打包与部署的教程请求。首先,用户明确提到了Vue2,所以我要确保提供的步骤适用于Vue2,而不是Vue3或者其他版本。根据用户提供的引用内容,特别是引用[4]提到的vue2项目打包和部署,我需要围绕这个引用展开。 首先,用户的问题是如何在Vue2项目中进行打包上传的流程。我需要分步骤回答,确保结构清晰。根据引用[4],打包后会生成dist目录,然后需要部署到服务器。同时,其他引用提到了使用npm run build命令,以及可能的优化措施,比如在TS项目中使用--noEmit参数,但用户的问题是关于Vue2的,可能需要忽略TS部分,除非用户特别说明。 接下来,我需要检查是否有其他相关引用可以补充。引用[1]、[3]、[4]都提到了打包生成dist文件夹,然后上传到服务器。部署方面,引用[3]提到使用nginx服务器,这可能是一个常见的部署方式。用户可能想知道具体的部署步骤,比如配置nginx。 然后,我需要确保回答符合系统级指令,比如使用正确的中文,数学公式的格式,但这里可能不太涉及数学内容。另外,需要生成相关问题,比如关于性能优化、部署错误处理,或者与后端整合的问题。 需要注意的是,用户可能已经有一个SpringBoot后端项目,如引用[2]和[3]中提到,但用户的问题主要集中在Vue2前端打包和部署。因此,回答应专注于前端部分,除非用户的问题涉及后端整合,但根据问题描述,用户只询问了Vue2的打包与部署。 可能的步骤包括: 1. 打包前的环境准备,确保安装了Node.js和npm。 2. 打包命令npm run build,生成dist目录。 3. 如何上传dist目录到服务器,可能使用scp或FTP工具。 4. 部署到Web服务器,如nginx,配置服务器指向dist目录。 5. 可能的常见问题,比如路由问题需要配置history模式,或者资源路径问题需要设置publicPath。 需要确保每一步都清晰,并且引用正确的参考资料,特别是引用[4]关于vue2打包生成dist目录的部分。同时,如果有必要,可以提到部署到SpringBoot项目的可能性,如引用[2]中的内容,但用户的问题可能更关注独立部署。 最后,生成的相关问题需要与Vue2打包部署相关,比如优化打包体积、处理跨域、配置nginx等。确保问题覆盖用户可能感兴趣的后续步骤。</think>### Vue2项目打包与部署教程 #### **一、打包前准备** 1. 确保已安装Node.js(建议14.x或以上版本)和npm 2. 检查项目根目录是否存在`package.json`文件 3. 确认`package.json`中的打包命令为: ```json "scripts": { "build": "vue-cli-service build" } ``` #### **二、执行打包** 1. 在项目根目录执行命令: ```bash npm run build ``` 2. 打包完成后会生成`dist`目录,包含`index.html`和`static`静态资源文件夹[^4] #### **三、本地验证(可选)** 使用serve工具预览打包结果: ```bash npm install -g serve serve -s dist ``` #### **四、上传到服务器** 1. 通过FTP工具(如FileZilla)或命令行上传: ```bash scp -r dist/ user@server_ip:/path/to/target ``` 2. 推荐部署路径:`/var/www/your_project` #### **五、Nginx服务器配置** 1. 安装Nginx后修配置文件(示例): ```nginx server { listen 80; server_name your_domain.com; location / { root /var/www/your_project/dist; index index.html; try_files $uri $uri/ /index.html; # 解决history模式路由问题 } } ``` 2. 重启Nginx生效: ```bash sudo systemctl restart nginx ``` #### **六、常见问题处理** 1. **静态资源404**:检查`vue.config.js`配置 ```js module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/' } ``` 2. **接口跨域**:配置Nginx代理 ```nginx location /api { proxy_pass http://backend_server; } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值