Vue-cli assets SubDirectory及PublicPath区别详解

更新时间：2020年08月18日 15:35:00 作者：niniHan

这篇文章主要介绍了Vue-cli assets SubDirectory及PublicPath区别详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

近期在参与用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#

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

一文详解Vue中如何实现页面骨架屏
为了提升页面加载速度,我们可以使用页面骨架屏技术来优化用户感知,下面就跟随小编一起学习一下如何在vue中实现页面骨架屏吧
2024-03-03
Vue.js绑定HTML class数组语法错误的原因分析
Vue.js绑定HTML class数组语法错误有哪些原因导致的呢，该如何解决呢？下面小编给大家分享Vue.js绑定HTML class数组语法错误的原因分析，感兴趣的朋友一起看看吧
2016-10-10
Vue2源码解析之自定义指令
自定义指令，其实就是在vue提供的钩子中写代码，这篇文章将从源码的角度，带大家深入了解一下Vue2种自定义指令的实现与使用，需要的可以参考一下
2023-05-05
Vue开发中出现Loading Chunk Failed的问题解决
本文主要介绍了Vue开发中出现Loading Chunk Failed的问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-03-03
详解vue项目的构建，打包，发布全过程
小编给大家通过本文详细介绍了关于vue.js项目的构建、打包、发布的全过程，文章很以后价值，值得你参考。
2017-11-11
vue使用prop可以渲染但是打印台报错的解决方式
今天小编就为大家分享一篇vue使用prop可以渲染但是打印台报错的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue判断input输入内容全是空格的方法
下面小编就为大家分享一篇vue判断input输入内容全是空格的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
基于Vue3+ts封装一个简单版的Message组件
近日项目中需要使用信息提示框的功能,ui组件库使用的是字节的arco-design-vue,看了一下,现有的Message不满足要是需求,直接使用message组件的话,改样式太麻烦,所以本文就本就介绍了基于Vue3+ts封装一个简单版的Message组件,需要的朋友可以参考下
2023-09-09
Vue.js中对css的操作（修改）具体方式详解
使用v-bind：class或者v-bind:style或者直接通过操作dom来对其样式进行更改；接下来通过本文给大家分享Vue.js中对css的操作（修改）具体方式，感兴趣的朋友跟随小编一起看看吧
2018-10-10
vue:内存泄露详解
这篇文章主要介绍了一个Vue的内存泄露详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2021-10-10