本人在开始学习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. 
						
  2. javascript 获取当前部署项目路径
		
    javascript 获取当前部署项目路径 ========================================= javascript获取当前部署项目路径: 主要用到Location 对 ...
    
		
    3. 
						
  3. Vue 部署单页应用，刷新页面 404/502 报错
		
    在 Vue 项目中,可以选择 hash或者 history.pushState() 实现路由跳转.如果在路由中使用history模式: export default new Router({ mode ...
    
		
    4. 
						
  4. vue部署后刷新404问题
		
    为什么会404NotFound Internet Information Services (IIS) 第一步:安装 IIS UrlRewrite 第二步:配置重写URL规则 在你的网站根目录中创建一 ...
    
		
    5. 
						
  5. Nginx+uwsgi+django+vue部署项目
		
    购买服务器 # 购买阿里云服务器 # 短期或是测试使用,创建 按量收费 服务器,可以随时删除,删除后不再计费,但要保证账户余额100元以上 连接服务器 1)账号 >: ssh root@39.9 ...
    
		
    6. 
						
  6. vue部署服务器以及解决部署到apache路由出现404
		
    最近在开发cms的时候使用Vue.js框架,利用vue-route.vue-cli结合webpack编写了一个单页路由项目,自己在服务器端配置apache.部署完成后,访问没问题,从页面中点击跳转就会 ...
    
		
    7. 
						
  7. 解决 Vue 部署在域名子路由 问题
		
    我们先看下官方说明 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/ .如果应用被部署在一个子路径上,你就需要用这个选项指定 ...
    
		
    8. 
						
  8. Linux的nginx环境的vue 部署
		
    1.使用WebStrom编程好的vue 进入到Terminal运行npm run build           2.使用WinSCP进入到nginx 目录配置文件下面,找到nginx.conf文件: ...
    
		
    9. 
						
  9. vue 关于图片路径的问题
		
    在vue 中,当我们想加载assets中的图片,本人按照多年的开发经验会这样写,那是没问题的 <img src="../assets.1.jpg"/> 如果我要用v-b ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. ubuntu16.04 mysql 开启远程连接
			
    首先保证自己的mysql安装是正常的,如果需要安装请参考 Ubuntu16.04重新安装MySQL数据库 第一步,远程访问赋予权限 方案一 首先用root用户登录mysql mysql -u root ...
    
			
    2. 
						
  2. LNMP分离式部署
			
    #### LNMP组合工作流程 在LNMP组合工作时,首先是用户通过浏览器输入域名请求Nginx Web服务,如果请求是静态资源,则由Nginx解析返回给用户:如果是动态请求(.php结尾),那么Ng ...
    
			
    3. 
						
  3. 《ASP.NET Core In Action》读书笔记系列，这是一个手把手的从零开始的教学系列目录
			
    最近打算系统学习一下asp.net  core ,苦于没有好的中文书藉,只好找来一本英文的 <ASP.NET Core In Action>学习.我和多数人一样,学习英文会明显慢于中文.希 ...
    
			
    4. 
						
  4. SSM(Spring4.x.x+SpringMVC4.x.x+Mybatis3.4.x)框架整合
			
    本文是参考SSM框架——详细整合教程(Spring+SpringMVC+MyBatis)修改而来的 一.环境 1. Myeclipse2016 2. Mysql 二.具体步骤 1. 整合Spring和 ...
    
			
    5. 
						
  5. 如何提高单片机C语言代码效率
			
    代码效率包括两个方面内容:代码的大小和代码执行速度.如果代码精简和执行速度快,我们就说这个代码效率高.一般情况下,代码精简了速度也相应提上来了.单片机的ROM和RAM的空间都很有限,当您编程时遇到单片 ...
    
			
    6. 
						
  6. 【Access】数据库四门功课--[增删改查]基础篇
			
    一.增 以userinfo为例 1.增加一条完整的数据 INSERT INTO userinfo VALUES (1, 2, 3, 4); 基本格式:INSERT INTO AAA VALUES (X ...
    
			
    7. 
						
  7. Arrays工具类
			
    1.Arrays工具类针对数组进行操作的工具类 提供了排序查找等功能 2.方法: Arrays.toString(int[] a) 将数据转换成字符串 Arrays.sort(int[] a) 将数组 ...
    
			
    8. 
						
  8. vue学习笔记—bootstrap+vue用户管理
			
    vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...
    
			
    9. 
						
  9. Github怎么写README
			
    编辑README文件 大标题(一级标题):在文本下面加等于号,那么上方的文字就变成了大标题,等于号的个数无限制,但一定要大于0 大标题 ==== 中标题(二级标题):在文本下面加下划线,那么上方的文本 ...
    
			
    10. 
						
  10. python实现简单算法
			
    #选择n^2def selectSort(li): for i in range(len(li)-1): minLoc = i for j in range(i+1,len(li)): if li[j ...
    
			
    11.