在Vue项目中,publicPath是一个非常重要的配置选项,它决定了打包后资源文件的引用路径。为了支持相对路径的打包,你可以在vue.config.js文件中进行相应的配置。下面我将详细解释如何在Vue项目中设置publicPath为相对路径,并提供相应的代码示例和测试方法。 1. 理解Vue的publicPath配置 publicPath是部署应用包时的基本URL。它...
一般静态文件路径要使用publicPath 项目打包部署时都会用到publicPath; 2.1、静态文件使用publicPath 如果你的项目里面的静态文件都放在public文件中,那么使用的时候要使用publicPath这个变量,防止打包后静态文件找不到; 你需要通过绝对路径来引用它们。因为:任何放置在 public 文件夹的静态资源都会被简单的复制,而不经过 web...
vue.config.js // 8088是我自己设置的node服务器端口,复制改为自己的 const port = process.env.PORT || 8088; module.exports = { productionSourceMap: false, // 不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建 devServer: { historyApiFallback: true, //资源找不到跳转index.ht...
publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/' } 官方文档说的很清楚,总结以下几种配置模式方便记忆: 傻瓜模式:路由采用 hash 模式,publicPath 采用相对路径 './' 模式,此种组合配置操作简单,可以部署到任意路径上,并且能支持二级目录,比较省心。即便是直接访问打包后...
vue publicPath 相对路径 绝对路径模式 vue.config.js module.exports= { publicPath:"./",// 这里用相对路径,vue文件中引入 js文件 scss,如果打包后遇到问题,可试试相对路径引入图片文件outputDir:"dapingdist", assetsDir:"static", https://segmentfault.com/a/1190000042107272...
在开发环境中使用相对路径: 在.env.development文件中添加: VUE_APP_PUBLIC_PATH=/ 在生产环境中使用CDN路径: 在.env.production文件中添加: VUE_APP_PUBLIC_PATH=https://cdn.example.com/ 在代码中动态获取public路径: const publicPath = process.env.VUE_APP_PUBLIC_PATH; ...
然后相对路径我们只需要配置,outputDir、assetsDir查看文档 // vue.config.jsmodule.exports= {// 输出文件目录 默认就是dist, 可以不用配置// outputDir: './dist',// 打包生成的静态资源 (js、css、img、fonts) 的目录assetsDir:'./assets',// 基本路径publicPath:'./', ...
1. publicPath publicPath 影响的是打包后外部资源的获取。 比如:如果配置是 publicPath: "./" 或者 publicPath: "",那么打包后 index.html 里的资源就是引入的相对路径,访问 www.a.com 那它的资源就是在 www.a.com/assets/xxx.js 下,这没问题,但是如果访问的路由 www.a.com/a/b/c,因为是单页项目只有...
相对publicPath 的限制 相对路径的 publicPath 有一些使用上的限制。在以下情况下,应当避免使用相对 publicPath: 1、当使用基于 HTML5 history.pushState 的路由时; 2、当使用 pages 选项构建多页面应用时。 webpack 官方对 publicPath的解释是 webpack 提供一个非常有用的配置,该配置能帮助你为项目中的所有资源指定...
publicPath配置为/test,打包后资源相对路径为从域名根目录开始的绝对路径: 两种配置都可以正确地找到JS、CSS等资源。不过还有个问题,那就是static中的静态资源依旧会找不到。 3、绝对路径引用的静态资源找不到的问题 因为在打包过程中,public下的静态资源都不会被webpack处理,我们需要通过绝对路径来引用它们。当项目部...