解决vue项目 build之后资源文件找不到的问题

解决静态资源失效的问题

这就需要修改我们的 config 中的 index.js了，默认的build 中的部分是这样的：

 build: {
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),

  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',

修改之后的应为这样的:

 build: {
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),

  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './',

但是这样能确保资源文件可被正常找到, 但页面还是处于白屏状态,

在路由页面找到mode: 'history',

export default new Router({
 mode: 'history',
 routes: [

将mode: 'history',这句话删除,在进行build,

export default new Router({
 // mode: 'history',
 routes: [

小伙伴们, 是不是发现好用啦~

补充知识：vue关于build和config文件都已修改，但打包后图片仍找不到的问题

最开始发现有的图片可以加载出来有的却不能，然后去看build和config文件的配置，

都很ok啊。

然后去看那些可以加载出来的跟不能加载的做了对比，发现不能加载出来的都是把路径写在js里面，用变量的方式写进html里面的，最后的解决方式就是：

//以require形式导入图片

url:require('../../static/xxx.png')

然后打包就没问题了；

后面再补充一下，background属性引入图片的话如果以行内元素引入也会造成图片路径找不到的情况，解决的办法就是把它写在style里面，以类名的方式引入；

总结一下，vue里面引用图片在打包后仍能正常使用的正确引用方式：

html内：img src以相对路径引入；

css：style以background属性作为背景图片引入，需以类名方式引入，行内样式可能会不生效；

js：以require('…/url')引入，赋予变量；

以上这篇解决vue项目 build之后资源文件找不到的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue项目部署上线遇到的问题及解决方法

    前言 今天把自己写的demo登录写完了,就想着试着走一下部署上线的流程.参考了很多的文档,终于成功进行了部署.在这里将服务器的搭建和vue项目的 部署上线进行整理(都是基础的知识,希望对大家有帮助.对我帮助是很大的) 2.流程 1.服务器搭建 这里我用的是腾讯云的服务器.买了一个域名.没有备案的域名也可以使用.买完服务器进行域名解析. 点击添加解析,按照下面这样填写就行 马赛克是你的外网ip 可以根据你需要的进行修改,我这只是最基本的绑定.其他请自行百度. 3.添加ssh密钥 第一步添加密钥,会

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

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

  • 解决Vue打包后访问图片/图标不显示的问题

    大家可否遇到过 npm run build 打包后,项目在线上运行时,资源文件 (图片.图标)不显示 的问题, 接下来,我给大家分享一下我的解决方案~ 1.检查打包后dist中的css文件 打开此文件后你会头晕,因为都是打包压缩过的css代码,不过没关系 ,关键字搜索url 检查该url路径是否匹配正确 对比后惊人发现!!! 因此在url路径前添加../../就OK了, 但是 很麻烦,每次打包后都要进行二次加工吗? 并不是!!! 2.自动添加 ../../ 的方法 打开build/utils.j

  • 解决vue项目 build之后资源文件找不到的问题

    解决静态资源失效的问题 这就需要修改我们的 config 中的 index.js了,默认的build 中的部分是这样的: build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublic

  • webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

    webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

    最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下 一.首先修改config目录下的index.js文件 将其中build的配置项assetsPublicPath进行修改,改为 目的是将资源文件的引入路径,改为相对地址(相对index.html) 二.此时html中的js.css.img引入均没有问题,但是css中的background-image还是报404 此

  • 解决vue项目打包后提示图片文件路径错误的问题

    vue项目打包后在production模式下提示图片 '404(not found),在dev环境下好好的,打包了就提示这个错误.这是为什么呢,以前第一次使用vue-cli构建项目的的时候只有两个图片文件,当时部署后报错路径问题, 当时的想法就是简单粗暴,直接在build好的文件修改了文件路径,再后来项目中遇到了一大堆静态资源,修改路径显然是不行的,看了一下生成文件大概知道是文件目录改变了,所以引用的路径也要随之改变,网上最简单的方法是修改 'config/index.js'文件中的 build

  • 解决vue项目,npm run build后,报路径错的问题

    在build目录下的webpack.prod.conf.js里面: output: { path: config.build.assetsRoot, publicPath: "/dist/", // 添加这行代码,可解决该问题或者publicPath: "./",也可解决 filename: utils.assetsPath('js/[name].[chunkhash].js'), chunkFilename: utils.assetsPath('js/[id].[

  • vue 项目build错误异常的解决方法

    在生成vue项目的时候,出现如下错误 ERROR in static/js/index.d66d806fcdd72b36147b.js from UglifyJs Unexpected token: punc (() [src/components/Hello.vue:26,0][static/js/index.d66d806fcdd72b36147b.js:34,6] ERROR in static/js/cell.89bb6f1195b769a2c949.js from UglifyJs U

  • 解决vue项目使用font-awesome,build后路径的问题

    问题: 项目在本地run情况下显示正常,在build后font-awesome的css文件依赖的几个图标文件引用路径报错. 在webpack.base.conf.js中关于几个文件的配置如下: { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } 解决: 通过

  • Vue项目build后,图片加载不出来的解决

    目录 Vue项目build图片加载不出来 1.在config/index.js文件内 2.在webpack.prod.conf.js文件内 3.在utils.js文件里添加 publicPath:'../../' Vue项目打包后部分图片不显示 Vue项目build图片加载不出来 vue项目,build之后会对图片进行处理,具体处理的方式是在文件webpack.base.conf.js中,有如下代码: module: {     rules: [      {         test: /\.

  • 解决vue打包之后静态资源图片失效的问题

    1.问题描述 在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到(404错误),这些图片可以是以src引入的图片, 也可以是css中定义的背景图片.图片能否显示与你的静态资源文件存在位置和引入的路径直接相关,下面是我的其中一个项目的文件存放以及路径书写方式! 2.解决方法之一 静态资源static存放位置放在src目录下 你可能会问为什么放在src目录下?放在跟src同级目录下不可以吗?好吧,一开始我也是放在src同

  • 解决vue项目报错webpackJsonp is not defined问题

    在vue单页面应用中,我们大概都会使用CommonsChunkPlugin这个插件. 传送门 CommonsChunkPlugin 但是在项目经过本地测试没有任何问题,打包上线后却会报错 webpackJsonp is not defined.这是因为公共文件必须在自己引用的js文件之前引用. 可以手动改文件引用,但是推荐以下解决办法: 找到build→webpack.prod.conf.js→找到HtmlWebpackPlugin插件,添加如下配置即可 chunks: ['manifest',

  • 使用kbone解决Vue项目同时支持小程序问题

    什么是kbone 微信小程序开发过程中,许多开发者会遇到 小程序 与 Web 端一起的需求,由于 小程序 与 Web 端的运行环境不同,开发者往往需要维护两套类似的代码,这对开发者来说比较耗费力气,并且会出现不同步的情况. 为了解决上述问题,微信小程序推出了同构解决方案 kbone 来解决此问题. 那么, kbone 要怎么使用呢?这里我们将通过一个 todo 的例子来跟大家讲解. 基本结构 首先,我们来看下一个基本的 kbone 项目的目录结构(这里的 todo 是基于 Vue 的示例, kb

随机推荐