vue开发之图片加载不出来问题解决

来源:http://www.chinese-glasses.com 作者:Web前端 人气:53 发布时间:2020-03-31
摘要:时间: 2019-10-23阅读: 100标签: 路径 时间: 2019-12-14阅读: 71标签: 加载 vue-cli 2.x 版本创建项目时,我们可以在 build 文件夹下找到webpack.base.conf.js 文件,在里面修改 resolve.alias 即可。 在使用

时间: 2019-10-23阅读: 100标签: 路径

时间: 2019-12-14阅读: 71标签: 加载

vue-cli 2.x 版本创建项目时,我们可以在 build 文件夹下找到 webpack.base.conf.js 文件,在里面修改 resolve.alias 即可。

在使用vue开发项目的时候,经常会遇到的一个问题就是:图片加载不出来。下面是我总结的几种图片加载不出来的情况及解决办法。

 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } },

一、项目打包完成后,打开整体空白1、路径问题

但是vue-cli 3.0 创建项目时,目录结构精简化,找不到 build 和 config 文件夹,那么该如何修改路径别名呢?

原因

只需要在项目根目录下,新建vue.config.js文件,代码如下:

在vue+webpack的项目中,项目打包之后的css和js的引用路径是绝对路径,项目部署之后会将静态当成根目录,就造成了文件引用路径的错误。

const path = require('path');//引入path模块function resolve(dir){ return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径}module.exports={ chainWebpack:(config)={ config.resolve.alias //set第一个参数:设置的别名,第二个参数:设置的路径 .set('@',resolve('./src')) .set('components',resolve('./src/components')) .set('assets',resolve('./src/assets')) .set('views',resolve('./src/views')) .set('network',resolve('./src/network')) //注意 store 和 router 没必要配置 }}

解决办法

配置好想用的路径别名后,重新启动项目,再引入文件时,使用别名即可 配置路径前:

通过修改配置文件,将绝对路径改为相对路径。

import my from "../views/my/My.vue";

具体操作如下:

配置路径后(不用再担心文件层级关系):

1.vue-cli 3.0版本之前

import my from "views/my/My.vue";

配置config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的。先看一下默认的路径。

注意,引用别名时如果是HTML中的路径,则需要在别名前面加符号~

module.exports = { build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', productionSourceMap: true,
 img src="~assets/img/tabbar/home.svg" alt="图片 1" slot="item-icon"

assetsPublicPath默认的是 ‘/' 也就是根目录。而我们的index.html和static在同一级目录下面。 所以要改为 ‘./ '

图片问题:

2.vue-cli 3.0版本之后

在做Vue项目的时候,由于项目需求,需要动态绑定img的src时,突然发现如果说是直接请求后台接口的图片地址就能显示,但是直接动态绑定img的src的图片的相对路径或者是绝对路径的时候,图片不能显示。

配置vue.config.js文件

html代码:

module.exports = { // baseUrl:'./', // vue-cli3.3以下版本使用 publicPath:'./' // vue-cli3.3+新版本使用
img :src="MyimgSrc" alt="图片 2"

2、vue-router的history模式打包后界面空白

js代码:

src里边router/index.js路由配置里边默认模式是hash,如果你改成了history模式的话,打开也会是一片空白。所以改为hash或者直接把模式配置删除,让它默认的就行 。如果非要使用history模式的话,需要你在服务端加一个覆盖所有的情况的候选资源:如果URL匹配不到任何静态资源,则应该返回一个index.html,这个页面就是你app依赖页面。

本文由10bet发布于Web前端,转载请注明出处:vue开发之图片加载不出来问题解决

关键词:

最火资讯