Vue-cli assets SubDirectory及PublicPath区别详解


Posted in Javascript onAugust 18, 2020

近期在参与用vue+ springBoot前后端不分离项目,遇到了前端打包后dist文件放到后台无法运行报404错误,static下的资源都访问不了问题。

问题1:我们知道前后端不分离项目,一些静态图片、页面直接放在resource/static下,由于前后台分开开发,前端进行了跨域处理,dist文件放到后台就相当于本地静态资源,所以不需要跨域处理,可以将引入跨域的路径baseURL置空

const service = axios.create({
    //baseURL: '/appstore',
    baseURL: '',
    responseType: 'json',
    timeout: 5000 // request timeout
  })

问题2:就是assetsPublicPath的问题,先去分析下assetsPublicPath和assetsSubDirectory 。

找到config/index.js文件下的build配置改为 assetsPublicPath: '/dist/'

build: {
  index: path.resolve(__dirname, '../dist/index.html'),
  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  // assetsPublicPath: '/',  assetsPublicPath: '/dist/',
}
  • index:模板
  • assetsRoot:打包后文件存放的路径
  • assetsSubDirctory:除了index.html之外的静态资源要存放的路径
  • assetsPublicPath: 代表打包后,index.html里面引用资源的相对地址

这样配置下就ok了

后台访问时要加上assetsPublicPath地址dist,即http://localhost:8080/dist/index.html#

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在JavaScript中遭遇级联表达式陷阱
Mar 08 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
吐槽一下我所了解的Node.js
Oct 08 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
May 07 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 #Javascript
JavaScript中交换值的10种方法总结
Aug 18 #Javascript
js+css3实现炫酷时钟
Aug 18 #Javascript
纯js+css实现在线时钟
Aug 18 #Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 #Javascript
js+css实现扇形导航效果
Aug 18 #Javascript
js实现3D旋转效果
Aug 18 #Javascript
You might like
php foreach循环中使用引用的问题
2013/11/06 PHP
php中chdir()函数用法实例
2014/11/13 PHP
php实现四舍五入的方法小结
2015/03/03 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
static函数与普通函数有什么区别
2015/12/25 面试题
介绍一下.net和Java的特点和区别
2012/09/26 面试题
计算机专业应届毕业生自荐信
2013/09/26 职场文书
绩效工资分配方案
2014/01/18 职场文书
工作室成员个人发展规划范文
2014/01/24 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
Android自定义双向滑动控件
2022/04/19 Java/Android