Vue的静态资源打包问题

今天药忘吃喽~ 2021-07-24 12:01 554阅读 0赞

# 一 问题 #

通过 v-for 循环，无法看到页面图片。

<template>
        <div v-for="img in imgs">
            <img width="100%" height="100%" ;src="img">
        </div>
    </template>
    <script>
    export default {
        name:"Home.vue",
        data(){
            return {
                imgs:[
                    '../img/1.jpg',
                    '../img/2.jpg',
                    '../img/3.jpg'
                ]
            }
        }
    }
    </script>

# 二 视频 #

[https://www.bilibili.com/video/BV1YE411A746?p=54][https_www.bilibili.com_video_BV1YE411A746_p_54]

# 三 说明 #

开发一个 vue 项目，标准步骤：

1 用 vue-cli 拉取一个项目骨架。

2 安装依赖。

3 使用 npm run dev 进入开发者模式。

此时在开发模式中，各种修改都能看到实时效果，这些内容实际上是由 vue-cli 进行打包并发布到 node.js 上的。最后开发完成以后，要上生产，这些资源是需要我们手动部署在生产的服务器上的。哪些资源是需要我们手动部署的，需要通过npm run build 命令来构建资源。

4 使用 npm run build 命令来构建资源。

会产生一个 dist 文件夹。里面包含静态资源。

在开发环境下，要想使用静态资源，首先需要通过npm run build 命令来创建 dist 文件夹，然后将静态资源放入，再在 vue 的代码中，去该/dist/文件夹内取资源即可。

[https_www.bilibili.com_video_BV1YE411A746_p_54]: https://www.bilibili.com/video/BV1YE411A746?p=54

发表评论取消回复

表情：

评论列表（有 0 条评论，554人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue webpack打包后静态资源文件名hash值去除

载地址：[https://blog.csdn.net/qq\_36497461/article/details/89852181][https_blog.csdn.net...

怼烎@/ 2024年04月19日 10:38/ 0 赞/ 73 阅读

相关 Webpack打包静态资源之图片篇

文章目录 * 占位符 * 更改输出目录 * url-loader 占位符我们知道，在打包图片的时候，名字是被`file-loader`重新命名过...

蔚落/ 2024年04月17日 06:03/ 0 赞/ 94 阅读

相关 SpringBoot访问静态资源和jar外部静态资源，部署前端打包后的vue项目放入静态资源里

记录一下使用SpringBoot访问静态资源和SpringBoot打包之后的jar外部静态资源，在开发的时候，一般选择前后端分离的方式，前端使用vue 后端使用SpringBo

港控/mmm°/ 2024年03月24日 08:41/ 0 赞/ 61 阅读

相关 Vue静态资源的获取

错误写法1：（没有用require） this.my_pic = './static/fruit/apple.png'; 上面的写法会导致图片无法渲染错误

亦凉/ 2022年11月15日 12:56/ 0 赞/ 242 阅读

相关 vue-cli webpack打包后加载资源的路径问题

vue项目，访问打包后的项目，输入路径后，页面加载空白。这时会有两类问题，都是路径问题。 1.一个是css,js,ico等文件加载不到，是目录里少了dist 打开页面时一片

我就是我/ 2022年04月17日 03:37/ 0 赞/ 395 阅读

相关 Vue项目打包后，静态资源路径出错

> 一，css、js路径出错 1.1 特征：这种情况表现为页面显示是空白的！ ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVp

朴灿烈づ我的快乐病毒、/ 2022年04月17日 02:51/ 0 赞/ 570 阅读

相关 vue-cli3项目打包时，静态资源请求失败 404

1. 首先放一张项目的目录： public文件夹存放 index.html以及一些json文件。 src -> assets 文件夹下存放一些需要的图片。

骑猪看日落/ 2021年10月23日 19:26/ 0 赞/ 1596 阅读

相关 Vue 打包静态文件路径设置

1、js，css的路径不对方法：找到 config/index.js，将其中的assetsPublicPath值改为’./’ assetsPublicPath:'./

绝地灬酷狼/ 2021年09月16日 15:52/ 0 赞/ 793 阅读

相关 vue静态资源打包

vue项目打包后，可能大家会注意到，会把一些文件都编译压缩到一起，但是打包后我们通常很难再去修改某些东西。 1. 场景一：单点登录。当我们需要把部署包部署到不同的环境，但是

系统管理员/ 2021年09月02日 06:06/ 0 赞/ 732 阅读

相关 Vue的静态资源打包问题

一问题通过 v-for 循环，无法看到页面图片。 <template> <div v-for="img in imgs">

今天药忘吃喽~/ 2021年07月24日 12:01/ 0 赞/ 555 阅读