关于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打包时的publicPath就是打包后静态资源的路径的文章就介绍到这了,更多相关vue打包静态资源路径内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 关于vue打包时的publicPath就是打包后静态资源的路径问题

    关于vue打包时的publicPath就是打包后静态资源的路径问题

    情况一 当不配置vue.config.js或者没有publicPath属性时,默认访问的静态路径是服务器的根目录 服务器根目录下没有js文件夹所以访问失败,把dist下的js,css等静态文件剪切到wamp/www目录下就可以正常访问了(注意重启wamp) 情况二 当配置为当前目录’./’ 访问正常,其实publicPath当前目录即打包后的index.html的当前目录,即dist目录,怎么证明,把publicPath的值设置为’…/’,看看情况三 情况三 又报错,把js,css等静态文件复制

  • vue cli3.0打包上线静态资源找不到路径的解决操作

    项目中遇到打包之后静态资源路径找不到,报如下错误: 解决方法是: 在项目的根目录下创建vue.config,js文件,在里面配置静态资源的路径,publicPath是配置静态资源路径的属性,vue.config,js文件的代码如下: module.exports = { publicPath: './' } 补充知识:vue-cli3 npm run build 打包后静态资源的配置 vue.config.js的配置 vue.config.js配置如下: const path = require

  • vue-cli webpack模板项目搭建及打包时路径问题的解决方法

    这里建议刚学vue的同学第一个小案例不要使用vue-cli进行操作,待对基本的api使用的比较顺手了之后再进行vue-cli的体验比较好.本人是一名后端开发人员,接触前端时间不长,这里有说的不好的地方,还请大家评论建议下. 1. 安装必要的环境准备 首先我们要能够暗转node.js,这个环境.百度搜索node,进入官网根据自己的操作系统进行下载即可.现在的版本都是自带npm的了.所以安装后,环境变量正常情况下会自动配置,开启一个命令行终端,输入node,npm,就可以看到相应的信息.那么说明安装

  • vue打包静态资源后显示空白及static文件路径报错的解决

    今天使用vue打包(npm run build)遇到了几个坑,在这里分享给大家 打包之后打开dist的页面显示空白: 这个问题以前就处理过,是打包过程中出现错误频率较高的一种,可能有3处地方会出现这种情况 1.记得改一下config下面的index.js中bulid模块导出的路径.因为打包后的index.html里边的内容都是通过script标签引入的,默认显示的路径不对,打开肯定是空白的. build: { index: path.resolve(__dirname, '../dist/ind

  • vue-cli脚手架打包静态资源请求出错的原因与解决

    问题 vue-cli默认配置打包后部署到特定路径下静态资源路径错误问题. 静态资源打包使用相对路径后css文件引入大图片路径错误问题 使用vue-cli2脚手架生成的默认打包配置文件,npm run build打包,部署项目到特定路径下://ip:port/test/index.html 此时访问//ip:port/test/index.html可以正常访问,但是引用的js和css等文件服务器响应为404,此时我们查看资源请求路径: http://ip:port/static/css/app.[

  • vue-cli与webpack处理静态资源的方法及webpack打包的坑

    通过Vue-cli进行webpack打包的坑 Vue-cli为Vue项目搭建的脚手架的确很方便,但打包时容易出现空白页,或者对应的静态资源加载不了. 我是通过将项目/config下的index.js的assetsPublicPath变成'./',变成相对路径,进行解决. cd vue demo npm run dev //运行程序 npm run bulid //webpack打包 处理静态资源 你也许会注意到vue-cli与webpack结合的项目中,我们通常会有两个静态资源的路径:src/a

  • vue-cli4如何打包静态资源到指定目录

    vue-cli4如何打包静态资源到指定目录

    目录 打包静态资源到指定目录 解决 vue-cli打包访问静态资源404 打包静态资源到指定目录 在最近开发工作中,我打包的 dist 文件夹下,vue-cli4 打包(npm run build)的静态资源全部都平铺展开在该文件夹下,看着很别扭,于是想打包到 static 文件夹下. vue-cli4 执行打包命令时,默认打包的位置是dist文件夹下,不会自动打包为一个模块(文件夹). 解决 在 vue.config.js 文件中设置 assetsDir 指定打包的目录为根目录下的 stati

  • vue中如何给静态资源增加路由前缀

    目录 vue给静态资源增加路由前缀 说说vue中的~(静态资源处理) Webpacked 资源 资源处理规则 总结 vue给静态资源增加路由前缀 在vue.config.js中找到这段代码: 找到publicPath,这个就是静态资源的默认路径,默认值是/,也就是静态资源默认路径是你的域名+路径,所以我们只需修改publicPath的值,就可以达到加前缀的效果,修改后效果如下: 现在你页面上的所有静态资源路径都会加上web前缀了 说说vue中的~(静态资源处理) Webpacked 资源 首先要

  • 解决Springboot整合shiro时静态资源被拦截的问题

    解决Springboot整合shiro时静态资源被拦截的问题

    目录结构如下 在自己配置的ShiroConfig中已经放行了 filterChainDefinitionMap.put("/static/**", "anon"); login.ftl也引用了静态资源 <link rel="stylesheet" type="text/css" href="/logins/css/normalize.css" rel="external nofollow&q

  • vue 项目打包时样式及背景图片路径找不到的解决方式

    问题描述:vue项目打包后,文件找得到,但是引用的字体及背景图片找不到: 解决方法: 主要是需要单独为 css 配置 publicPath . ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api,可以为css单独配置 publicPath . 对于用 vue-cli 生成的项目,dist 目录结构如下: dist ├── index.html └── static     ├── css     ├── img     └── js 经

随机推荐