这是今年的第一篇博客。整理一下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之项目打包部署到服务器的更多相关文章

  1. vue项目打包部署到服务器,静态资源文件404

    js文件404问题        原因:打包的项目静态资源的路径需要设置为绝对路径.如果是相对路径会出错 解决办法:修改config/index.js文件,将 assetsPublicPath修改为' ...

  2. vue项目打包 部署nginx服务器 访问远程接口 本地json 跨域问题

    本文建立在你已经在windows7上已经配好了nginx的前提下进行!!! 如果没有请移步至:https://www.cnblogs.com/jack1208-rose0203/p/5739765.h ...

  3. vue之项目打包部署生产环境前需要注意的问题!

    我们在本地写好代码,然后打包上线前需要修改相关的配置文件,否则项目无法正常运行,主要是路径不对,找不到相关文件. 1.修改config > index.js(如下图) 2.在build > ...

  4. Spring Boot + Spring Cloud 实现权限管理系统 后端篇(十四):项目打包部署

    项目打包部署 安装MySQL镜像 注意:如果使用docker镜像安装MySQL,也需要在前端部署主机安装MySQL,因为备份还原功能是使用MySQL的本地命令进行操作的. 下载镜像 执行以下命令,拉取 ...

  5. Vue+elementUI build打包部署后字体图标丢失问题

    错误描述:Vue+elementUI  build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 ...

  6. 【转】vue项目打包部署——nginx代理访问

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...

  7. vue项目 打包部署上线

    1. npm run dev:本地开发的时候做调试用的. 2. npm run build:打包部署上线,生成一个 dist 文件夹. 注意:用 npm run build 时,常遇到因引用路径不对导 ...

  8. axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器

    1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...

  9. vue+webpack项目打包后背景图片加载不出来问题解决

    在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...

随机推荐

  1. Java Properties的使用

    转自:https://www.cnblogs.com/bakari/p/3562244.html 一.Java Properties类 Java中有个比较重要的类Properties(Java.uti ...

  2. saltstack集合

    saltstack集合 saltstack(一):   saltstack简介 saltstack(二):   saltstack安装及配置 saltstack(三):   saltstack远程执行 ...

  3. php 的file 缓存

    PDO方式连接数据库类 <?php /** * @author 黄功延 * createTime 2018/5/28 0028 09:44 */ class Db { //私有化数据库连接数据, ...

  4. 寒假答辩作品:Java小游戏

    目录 java入门小游戏[test] 游戏界面 前言 (可直接跳到程序介绍) 前期入门小项目 前期收获 后期自创关卡 后续 java入门小游戏[test] 游戏界面 github地址: https:/ ...

  5. js循环小练习

    function fn(){ //打印三角形 for(var i = 1 ; i <= 30 ; i++){ for(var x = 1; x <= i; x++ ){ document. ...

  6. C++ 解决列车重排问题

    问题节选自<<数据结构.算法与应用(C++语言描述)>>, 思路与代码为原创, 如有疏漏及问题欢迎指正 问题描述: 一辆列车有n节车厢, 车厢排列乱序(如: 284657139 ...

  7. 多线程笔记 - Master-Worker

    多线程的 Master-Worker 从字面上也是可以理解的. Master 相当于领导, 一个就够了, 如果是多个, 那么听谁的, 是个大问题. Master负责指派任务给 Worker. 然后对每 ...

  8. JS常见的表单验证,H5自带的验证和正则表达式的验证

    H5验证 自带的验证无法满足需求: <form action="" method="get"> name:<input type=" ...

  9. css如何玩转有序无序列表项list样式

    在无序列表ul>li中,无线列表的标志是出现在各列表前面的圆点.在有序列表ol>li中,前面默认带有数字,如何修改列表前面的项目符号,只需要通过list-style调整就好,常见的符号有( ...

  10. SDMask(iOS蒙层遮罩弹出引导)

    SDMask介绍 地址 针对iOS项目,大部分弹出视图三方都把弹出内容作为了项目的一部分,这种耦合局限性较大.该项目对此解耦,围绕我何时需要使用蒙层而展开设计.将弹出内容和动画和事件完全分离出去让co ...