vuecli4中如何配置打包使用相对路径
更新时间：2022年07月26日 15:38:00 作者：sun_chen_93
这篇文章主要介绍了vuecli4中如何配置打包使用相对路径，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
配置打包使用相对路径
使用vuecli4进行项目打包时，默认使用的是根目录的方式，这样打包直接项目直接运行就是一个大白屏，非常难受！
这时我们就需要在设置打包使用相对目录的方式，设置过程非常简单。
1.在vuecli跟目录下添加 `vue.config.js`作为配置文件
2.添加以下配置：
module.exports = {
//配置 运行和打包时的文件路径
publicPath:process.env.NODE_ENV==='production'?'./':'/',
}3.重新编译项目。
非常好用！
vue打包时的publicPath,就是打包后静态资源的路径
情况一
当不配置vue.config.js或者没有publicPath属性时，默认访问的静态路径是服务器的根目录
服务器根目录下没有js文件夹所以访问失败，把dist下的js,css等静态文件剪切到wamp/www目录下就可以正常访问了（注意重启wamp）
情况二
当配置为当前目录’./’
访问正常，其实publicPath当前目录即打包后的index.html的当前目录，即dist目录，怎么证明，把publicPath的值设置为’…/’，看看情况三
情况三
又报错，把js,css等静态文件复制到wamp/www目录下试一下
访问成功，说明：publicPath设置为当前目录’./'就是dist目录的设想，没错
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了vue组件通信的几种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
在我们使用Vue Element处理界面的时候，往往碰到需要利用JS集合处理的各种方法，如Filter、Map、reduce等方法，也可以涉及到一些对象属性赋值等常规的处理或者递归的处理方法，本篇随笔列出一些在VUE+Element 前端开发中经常碰到的JS处理场景，供参考学习。2021-05-05
element-ui官网上有分页实现的功能,简单方便又好用,也有很多分页的样式,你可以根据需要去选择自己想要的样式,下面这篇文章主要给大家介绍了关于Vue使用Element-UI实现分页效果的相关资料,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了vue中push()和splice()的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
我们在平时做业务的时候,父子组件通信会经常用到ref,这篇文章主要给大家介绍了关于vue3循环设置ref并获取的解决方案,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-02-02
前端使用uniapp开发项目完成后，需要将页面打包，生成H5的静态文件，部署在服务器上这样通过服务器链接地址，直接可以在手机上点开来访问，下面小编给大家讲解uniapp开发打包成H5部署到服务器的步骤，感兴趣的朋友一起看看吧2022-11-11
vue3界面使用router及使用watch监听router的改变
vue2中使用router非常简单，但是vue3中略微有些改变，通过本文讲解下他的改变，对vue3 watch监听router相关知识感兴趣的朋友一起看看吧2022-11-11
vue3中实现文本显示省略号和tooltips提示框的方式详解
在 B 端业务中,我们经常会遇到文本内容超出容器区域需显示省略号的需求,当鼠标移入文本时,会出现 Tooltip 显示完整内容,最近,我也遇到了这样的场景,接下来给大家介绍vue3中实现文本显示省略号和tooltips提示框的方式,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了vue3 多种方法的锚点定位，使用 Vue Router 导航守卫可以简化导航逻辑、统一管理导航逻辑和进行权限控制，但需要学习和理解相关概念，并且需要手动编写和管理导航守卫的逻辑,本文给大家介绍的非常详细，需要的朋友可以参考下2023-07-07
这篇文章主要为大家详细介绍了vue移动端实现手机左右滑动入场动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-08-08
最新评论