vue之项目打包部署到服务器
这是今年的第一篇博客。整理一下vue如何从项目打包到部署服务器,给大家做下分享,希望能给大家带来或多或少的帮助,喜欢的大佬们可以给个小赞,如果有问题也可以一起讨论下。
第一步:这是很关键的一步。打开项目,找到config文件夹下的index.js。搜索 assetsPublicPath 默认值为 '/‘ 应改为你要挂在到服务器的那个文件下的路径 。

第二步:因为在开发时 会有跨域问题 我们为了方便会配置跨域代理比如proxyTable 一般都这样写,因为要部署到服务器上所以到服务器上之后就不存在跨域了,注销掉他。

第三步:解决部署后图片图表路径404问题如xxxx/static/css/static/css/xxx这样的路径 在build/utils 中,找到这里添加 publicPath:'../../' 这条代码 即可解决这个问题。

第四步: 在build/utils/webpack.prod.conf.js 中的output中添加一条 publicPath:'./'

第五步:router/index.js路由模式一定要设置一个 不要不写 虽然默认的是 mode:'hash' 但不写的话会造成访问时出现空白页面 一定要写上 写上 history模式会消除 访问时 路径是出现个#的情况 默认的hash模式会有# ,找到目录src/router/index.js 修改成如下图所示:

好啦这样就可以部署到服务器上了。
vue之项目打包部署到服务器的更多相关文章
- vue项目打包部署到服务器,静态资源文件404
js文件404问题 原因:打包的项目静态资源的路径需要设置为绝对路径.如果是相对路径会出错 解决办法:修改config/index.js文件,将 assetsPublicPath修改为' ...
- vue项目打包 部署nginx服务器 访问远程接口 本地json 跨域问题
本文建立在你已经在windows7上已经配好了nginx的前提下进行!!! 如果没有请移步至:https://www.cnblogs.com/jack1208-rose0203/p/5739765.h ...
- vue之项目打包部署生产环境前需要注意的问题!
我们在本地写好代码,然后打包上线前需要修改相关的配置文件,否则项目无法正常运行,主要是路径不对,找不到相关文件. 1.修改config > index.js(如下图) 2.在build > ...
- Spring Boot + Spring Cloud 实现权限管理系统 后端篇(十四):项目打包部署
项目打包部署 安装MySQL镜像 注意:如果使用docker镜像安装MySQL,也需要在前端部署主机安装MySQL,因为备份还原功能是使用MySQL的本地命令进行操作的. 下载镜像 执行以下命令,拉取 ...
- Vue+elementUI build打包部署后字体图标丢失问题
错误描述:Vue+elementUI build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 ...
- 【转】vue项目打包部署——nginx代理访问
我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...
- vue项目 打包部署上线
1. npm run dev:本地开发的时候做调试用的. 2. npm run build:打包部署上线,生成一个 dist 文件夹. 注意:用 npm run build 时,常遇到因引用路径不对导 ...
- axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器
1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...
- vue+webpack项目打包后背景图片加载不出来问题解决
在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...
随机推荐
- mysql 查询指定数据库所有表, 指定表所有列, 指定列所有表 所有外键及索引, 以及索引的创建和删除
查询指定 数据库 中所有 表 (指定数据库的,所有表) // 可以把 TABLE_NAME 换成 * 号, 查看更丰富的信息 SELECT TABLE_NAME FROM information_sc ...
- H5谷歌登录 webview错误
接入谷歌登录 H5接入谷歌登录打包apk使用webview谷歌登录不上(谷歌不支持用户代理被归类为嵌入式用户代理(也称为网络视图),因此不允许向Google发出OAuth授权请求) 解决办法:替换ua ...
- Keras入门(六)模型训练实时可视化
在北京做某个项目的时候,客户要求能够对数据进行训练.预测,同时能导出模型,还有在页面上显示训练的进度.前面的几个要求都不难实现,但在页面上显示训练进度当时笔者并没有实现. 本文将会分享如何在K ...
- centos容器yum安装JDK环境
1.yum命令安装jdk 选择版本安装 -openjdk java--openjdk-devel 或者如下命令,安装jdk1.8.0的所有文件 -openjdk*yum install -y java ...
- android系统webview使用input实现选择文件并预览
一般系统的实现方式: 代码实现 <!doctype html> <html> <head> <meta charset="utf-8"&g ...
- xmppmini 项目详解:一步一步从原理跟我学实用 xmpp 技术开发 2.登录的实现
第二章登录的实现 金庸<倚天屠龙记> 张三丰缓缓摇头,说道:“少林派累积千年,方得达成这等绝技,决非一蹴而至,就算是绝顶聪明之人,也无法自创.”他顿了一顿,又道:“我当年在少林寺中住过,只 ...
- 【大白话系列】MySQL 学习总结 之 COMPACT 行格式的设计原理
如果大家对我的 [大白话系列]MySQL 学习总结系列 感兴趣的话,可以点击关注一波. 一.回顾 MySQL 学习总结系列至此已经第七节了. 从大方向:我们已经学习了 MySQL 的架构设计.Inno ...
- kali中安装中文输入法ibus
1.控制台输入命令: apt-get install ibus-pinyin 出现选择都选yes 2.安装完毕后输入命令,重启虚拟机: reboot 3.打开 输入法,如图中2处input meth ...
- clr via c# clr寄宿和AppDomain (一)
1 clr寄宿-----.net framework在windows平台的顶部允许.者意味着.net framework必须用windows能理解的技术来构建.所有托管模块和程序集文件必须使用wind ...
- R语言入门:使用RStudio的基本操作
R语言在人工智能,统计学,机器学习,量化投资,以及生物信息学方面有着十分广泛的运用.也是我大学的必修课,因此这里梳理一些有关R语言的知识点,做做记录. 首先我们需要知道R语言的工作区域,R语言默认的工 ...