Vue的静态资源打包问题

一 问题

通过 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

三 说明

开发一个 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/文件夹内取资源即可。