Vue项目打包部署(history模式)
前提准备
我们需要准备一个vue项目(vue-cli3或vue-cli4)、一个nginx服务器
本教程讲解的是vue-router中history模式的部署,完全适用于vue-cli3,4。vue-cli2需要进行略微改动
部署流程
- 配置vue.config.js中的publicPath
- 配置vue-router的模式为history
- 配置vue-router中的base(基态路由【与服务端配合】)
- 使用
npm run build
生成dist文件夹 - 配置nginx代理(进行生产环境下的反向代理,注意生产环境下devServer无效【或者你可以配置devserver的根目录是dist都可以】)
- 配置nginx路由
vue.config.js
如果你的项目中没有这个文件,直接在项目根目录创建它即可
1.配置publicPath
这里我们配置publicPth为路由/vue/
module.exports = {// /vue/这个名字你自己起,也可以用我这个publicPath: process.env.NODE_ENV === "production" ? "/vue/" : "./",outputDir:'dist',
}
为了兼容各种情况,我强烈建议大家路由写成/vue/而不是写成/vue
vue-router
1.配置路由模式和基础路由
export default new Router({// history模式,需要和服务端配合才能在生产环境下正常使用mode: 'history',// 基本路由,这个名字可以自己起,但是要注意和vue.config.js里面publicPath所起的名字一致base:'/vue/',routes:[]
})
npm run build
我们在vue项目根目录下运行npm run build
就可以进行项目的打包了。打包后会生成dist文件夹,把它放进nginx的html文件夹下即可
nginx
1.配置nginx代理
有些时候我们需要请求一些跨域服务,在开发时,我们可以配置devServer的proxy实现跨域访问。
但是在npm run build
后,我们会发现代理无效。这是因为生产环境下的文件已经脱离devServer了,所以自然代理就没有用了,所以一般生产环境代理我们使用nginx去做
location /api/{proxy_pass http://121.36.94.221:6600/;index index.html index.htm;
}location /info/{proxy_pass http://ckk.xiaoandcai.cn/;index index.html index.htm;
}
假设我们的nginx服务器的端口号是8080,
那么我们做跨域请求时候只需要访问:localhost:8080/api就行了,这样做我们就相当于访问那个服务器下的资源
但是一般部署项目的时候我们不会发送axios去请求localhost:8080/api,我们会直接请求/api
举个例子
//不会这样做,因为部署服务器后地址要换成ip,不然会404
axios.get("localhost:8080/api")
//你可以选择这样做,但是我们不推荐
axios.get("ip:8080/api")
//我们推荐这样做,让axios根据相对路径补全ip+端口,这样比较省心【但是要注意你的项目要部署在nginx代理服务器下。如果你不部署的话相对路径也是不行的,毕竟你都没部署人家nginx服务器上,自然你的项目就不是nginx家的孩子,所以相对路径的小名,nginx怎么能认识呢?】
axios.get("/api")
2.配置nginx路由
location / {root html;index index.html index.htm;autoindex on; #开启nginx目录浏览功能autoindex_exact_size off; #文件大小从KB开始显示charset utf-8; #显示中文
}
# 写我们的路由暗号/vue
location /vue{# alias后面写项目所在目录 xxxxxxx一定要注意,不能写成D:\nginx\nginx-1.20.0\html\dist,要写成斜杠/形式,否则会404alias D:/nginx/nginx-1.20.0/html/dist;charset utf-8; #显示中文
}
现在启动nginx服务器输入localhost:8080/vue就可以访问我们的vue项目了
Vue项目打包部署(history模式)相关推荐
- Vue项目打包部署(hash模式)
前提准备 我们需要准备一个vue项目(vue-cli3,vue-cli4).一个nginx服务器(可有可无) 本教程讲解的是vue-router中hash模式的部署[完全适用vue-cli3.4],v ...
- Vue项目打包部署总结
由于之前对前端部署上线这一套不清楚,所以这次通过查找多方资料总结一下.使用Vue作先后端分离项目时,一般前端是单独部署,用户访问的也是前端项目地址,所以前端开发人员颇有必要熟悉一下项目部署的流程与各种 ...
- Vue 项目打包部署实战完整流程总结!
使用Vue做前后端分离项目时,通常前端是单独部署,用户访问的也是前端项目地址,因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了. Vue项目打包部署本身不复杂,不过一些前端同学可能 ...
- vue项目打包部署到服务器,Vue项目打包部署到apache服务器的方法步骤
vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进 ...
- vue项目打包部署-----解决打包后访问资源失败问题
vue项目打包部署-----解决打包后访问资源失败问题 参考文章: (1)vue项目打包部署-----解决打包后访问资源失败问题 (2)https://www.cnblogs.com/ycsc/p/1 ...
- vue项目打包部署流程
vue项目打包部署流程 一.打包 二.部署 三.部署多个项目 一.打包 (可选)去除打包后会生成的map文件:在vue.config.js中添加productionSourceMap: false, ...
- vue项目打包部署nginx跨域
vue项目打包部署nginx跨域 vue项目连接外部api接口时,打包部署到nginx后出现api404,api跨域问题,这个时候需要给vue项目本身进行跨域,再配置nginx中进行跨域即可解决,详见 ...
- Vue项目打包部署到Nginx服务器步骤总结
前期准备工作: 1. 准备一台服务器: 2. 根据服务器的系统环境安装配置Nginx; 3. 了解Nginx的配置文件,了解常用的linux系统操作命令 4. 进行Vue项目的打包部署 因为我只是单纯 ...
- vue项目打包部署linux_Vue项目打包部署到Nginx服务器
"随着前后端分离项目的流行,vue项目开发部署也成为了前端人员必备技能:本文将带你学习vue项目部署及遇到的各种坑." 关于vue项目部署不得不提的是配置文件vue.config. ...
- vue项目打包部署注意点 + 宝塔面板几步部署项目
1.vue项目打包 1.1 终端运行打包命令 在编辑器的终端运行vue项目打包命令 yarn run build 打包成功如下: 这时我们可以看到项目目录多出来一个dist文件夹,记住它,后面部署就靠 ...
最新文章
- linux下sql查询的使用,sql-server – 如何在Linux上查看SQL Server中的执行计划
- 28 Java类的加载机制、什么是类的加载、类的生命周期、加载:查找并加载类的二进制数据、连接、初始化、类加载器、双亲委派模型、自定义类加载器
- Oracle中创建、修改、删除序列
- 【渝粤题库】广东开放大学 经济学基础 形成性考核
- 再好好聊聊 HTTP 里的 Cookie | 实用 HTTP
- mysql函数做条件_MySQL语句优化(三):避免条件字段做函数操作
- linux装系统到u盘,萌新的Linux之路(1):安装Linux系统到U盘
- Oracle教程之管理UNDO(九)--如何解决Oracle ORA-01555错误
- 从一个组件的实现来深刻理解 JS 中的继承
- 【unity】Vector3.AngleCrossDot
- OpenCL编程入门
- ubuntu linux软件,Linux新系统必装软件(Ubuntu及类似系统)
- (一)数字图像处理基础知识点
- 猜单词游戏。计算机随机产生一个单词,打乱字母顺序,供玩家去猜 a.准备一组单词,随机抽取一个b.将抽取的单词作为答案,打乱字母顺序,显示给玩家,供其猜测c.猜测错误继续猜测或以空字符串.
- 大数据分析的几种方法
- 关于cv::cuda::GpuMat与PtrStepSz
- crm订单管理系统有哪些?
- 树莓派+DS18B20温度传感器+yeelink物联网云
- MySQL时间格式化
- 道格拉斯-普克 抽稀算法