本人在开始学习vue的过程中,虽然比较容易上手,还是碰到了很多坑,比如我今天要说的VUE的部署问题。我在部署vue的过程中发现自己在开发环境中,页面什么都可以跑起来,但是npm dev build后发现好多问题就出来了,比如图片的路径问题,访问的路径问题。

1、图片路径问题:个人觉的把所有的静态图片可以放入static文件夹下面,本身这个文件夹我们在搭vue脚手架的时候就已经生成了,从这个名称就可以知道它改存放那些资源。对于静态资源应用的方式我是这样处理的,在webpack.base.conf文件中,把这个资源映射成为全局的到时候就不会存在图片调用不到的问题,我的解决方式如下图所示

2、部署到服务器访问路径的解决方式,我是这样进行处理的打开vue的config下的index文件 修改生成环境的路径,这块我也是搜索过很多网上资料得到的结果,这样你可以把你build出来的dist文件整个丢到服务里,比如用的是tomcat

,把文件丢到tomcat下,文件夹可以重新命名,假设我文件夹命名为myvue,tomcat端口号我们配置为8080,我们部署完成访问http://ip:8080/myvue,就可以直接访问了,还一个地方需要改,我是参考网上写的方法,修改build下的utils,在generateLoaders方法里面加个publicPath节点,如截图所示

这块我是参照网上的一个别人写的东西,也解决了我的这个问题,非常感谢,附上链接地址https://segmentfault.com/q/1010000009642018

												

vue部署的路径问题的更多相关文章

  1. vue 部署404

    https://www.cnblogs.com/kevingrace/p/6126762.html 在nginx部署https://www.jianshu.com/p/7017143e3f7a 在ap ...

  2. javascript 获取当前部署项目路径

    javascript 获取当前部署项目路径 ========================================= javascript获取当前部署项目路径: 主要用到Location 对 ...

  3. Vue 部署单页应用,刷新页面 404/502 报错

    在 Vue 项目中,可以选择 hash或者 history.pushState() 实现路由跳转.如果在路由中使用history模式: export default new Router({ mode ...

  4. vue部署后刷新404问题

    为什么会404NotFound Internet Information Services (IIS) 第一步:安装 IIS UrlRewrite 第二步:配置重写URL规则 在你的网站根目录中创建一 ...

  5. Nginx+uwsgi+django+vue部署项目

    购买服务器 # 购买阿里云服务器 # 短期或是测试使用,创建 按量收费 服务器,可以随时删除,删除后不再计费,但要保证账户余额100元以上 连接服务器 1)账号 >: ssh root@39.9 ...

  6. vue部署服务器以及解决部署到apache路由出现404

    最近在开发cms的时候使用Vue.js框架,利用vue-route.vue-cli结合webpack编写了一个单页路由项目,自己在服务器端配置apache.部署完成后,访问没问题,从页面中点击跳转就会 ...

  7. 解决 Vue 部署在域名子路由 问题

    我们先看下官方说明 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/ .如果应用被部署在一个子路径上,你就需要用这个选项指定 ...

  8. Linux的nginx环境的vue 部署

    1.使用WebStrom编程好的vue 进入到Terminal运行npm run build           2.使用WinSCP进入到nginx 目录配置文件下面,找到nginx.conf文件: ...

  9. vue 关于图片路径的问题

    在vue 中,当我们想加载assets中的图片,本人按照多年的开发经验会这样写,那是没问题的 <img src="../assets.1.jpg"/> 如果我要用v-b ...

随机推荐

  1. 关于iframe的一些操作

    用于自己学习,本身对于js的一些东西没有深入了解,也是用到再去查 1.如果现在在一个页面,想要获取这个页面中的iframe中嵌入的页面中的一个指定id的div var iframeObj = docu ...

  2. Cpython解释器GIL-多线程执行流程

  3. Django中上传图片---避免因图片重名导致被覆盖

    上一篇文章中(https://www.cnblogs.com/lutt/p/10640412.html),我们以图片文件夹+图片名字的方式来储存图片,这样的做法会导致有重名的图片会导致之前的图片被覆盖 ...

  4. Python中的sys.path.append()

    当我们导入一个模块时:import  xxx,默认情况下python解析器会搜索当前目录.已安装的内置模块和第三方模块 当运行脚本文件和导入模块不再同一目录下 import sys sys.path. ...

  5. CentOS 7 安装配置KVM 通过KVM安装CentOS系统

    搭建环境 : CentOS 7 [root@KVM ~]# systemctl stop firewalld [root@KVM ~]# systemctl disable firewalld [ro ...

  6. html5 css练习 画廊 元素旋转

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  7. jQuery - 链(Chaining)

    http://www.runoob.com/jquery/jquery-chaining.html jQuery - 链(Chaining) 通过 jQuery,可以把动作/方法链接在一起. Chai ...

  8. var,dynamic的用法

    private void Form1_Load(object sender, EventArgs e) { var dt = Getuser() as IEnumerable<dynamic&g ...

  9. oracle 事务 与 提交

    Oracle事务 一般事务(DML)即数据修改(增.删.改)的事务事务会将所有在事务中被修改的数据行加上锁(行级锁),来阻止其它人(会话)同时对这些数据的修改操作.当事务被提交或回滚后,这些数据才会被 ...

  10. OLTP和OLAP的区别

    OLTP和OLAP的区别 联机事务处理OLTP(on-line transaction processing) 主要是执行基本日常的事务处理,比如数据库记录的增删查改.比如在银行的一笔交易记录,就是一 ...