vue静态资源及数据的配置总结-技术圈

一个完整的vue系统，必然包含各类静态资源，比如图片、样式文件、配置文件(分好多类型)。在vue-cli3中有个public文件夹，专门存放静态资源文件和其他不用打包的文件。如果把图片、样式文件这类称作静态资源，配置文件中的内容称作静态数据，那如何实现这些资源及数据的正确配置呢？一起来看看！

一、样式资源地址配置

有个这样的需求：项目中用到一个图片，开发时在a文件夹下，打包部署时又要在b文件夹下。但是vue-loder不能转换<style>标签中的路径，也就是说如果你的图片样式写在style标签里面，打包后，这个地址不会变到b文件夹下。那如何解决这个问题？有两种方式:

放入样式文件再import

1.把样式写到一个css文件中，并在main.js或者.vue文件中引入进来。

import "path/xxx.css"

//xxx.css
<style>
  .img {
    background: url('path/xxx.png')
  }
</style>

在代码中require进来

2.webpack里面一切皆模块，所以你可以把图片require进来：

<template>
    <div :style="img"></div>
</template>

<script>
    export default {
        data(){
            return {
                 img: {background: "url(" + require(path/xxx.png) + ")"}
            }
        }
    }
</script>

二、iframe引用html文件

有时候项目中会在vue组件中引用一个iframe标签，可能是外部网址，也可能是一个本地静态html，如果是本地的，这个文件放在哪儿合适呢？

放在哪里

如果是vuecli2就要放在static文件夹里，如果是vuecli3就要放在public夹下

如何引用

vuecli2中，static文件夹是与src平级的，引用就是相对地址方式，像这样：

src="../../../../static/videos/video.html"

vuecli3中，public文件夹替代了static，html页面在public文件夹中，如下图。也是与src平级，但是引用就不一样了，如果你写成这样../../../public/video.html，就找不到文件了，你得用绝对地址，像这样：

/public/video.html

任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack编译。你需要通过绝对路径来引用它们。关于public，官方文档vuecli3-public有详细说明，可以看下。

三、静态热更新配置文件

看标题，静态热更新配置文件，这是我自己创造的一个名词，因为我找不到合适的说法。大部分人关注基本都是环境变量、vue.config.js等配置相关的东西，但是这些文件如果修改了，就只能重新启动或者重新打包才能发挥作用。

所谓静态热更新配置文件，有两个意思：
一是静态，我们知道静态文件，像图片样式这种就是public文件夹下，打包时不会编译，用的时候在代码中直接引用；
二是热更新，这个也好理解，我修改了这个配置文件，对应的系统也相应发生变化。整体来说就是，我这个配置文件就在public文件夹下，打包不会被编译，原封不动地被拷贝到部署包中；部署时，我直接修改配置文件就可以让系统基于此配置文件产生变化。

如果用到了在线的动态部署系统，重新改下再自动部署，似乎也没多大点事。但是在没实现自动化部署的情况下，如何实现一个热更新的配置似乎还是有必要的，来看看怎么实现吧。

现在这个配置文件的需求明确了，位置也定好就在public下了，那如何动手实现呢？

这里的思路就是定义全局对象，本质上vue就是绑定在window上的，那我将配置文件绑定到window上就可以了，这是一种方式；另一种方式，也可以绑定到vue上，类似于这样 Vue.prototype.xxx；还一种方式，可以直接在组件或者模块内引用。后面两种本质上是一种方式，具体实现来看下实现过程吧：

定义window对象属性

如果要绑定在window上，那么这个配置文件只能在一个地方引用了，就是从系统起始页index.html引用。引用方式在vue-cli文档上有详细说明，具体类似于这样：

<script type="text/javascript" src="<%= BASE_URL %>config.js"></script>

config文件我可以像下面这样定义，最关键是要绑定到window上，因为在index.html上引用，相当于独立于vue应用之外了，好在vue对象本身最后也是绑定在window上。

;(function(){
    const config = {}
    window.config = config;
})()

此文件要放在public文件夹下，启动页可以直接引用到，打包部署后，在服务器上修改具体配置就可以了，不用再次打包部署。需要注意的是，此配置文件只能用es5语法，因为模块在script标签中无法直接引用。还有个原因就是，如果用es6，配置文件中如果引用了其他模块，这里的配置文件更加难以直接引用了，因为打包后引用关系就变了，除非都是在public内的绝对路径引用。

绑定vue、组件/模块内引用

前面一种绑定到window上，是直接在index.html上引用的，这对配置文件有一定要求。如果我想把配置文件绑定到vue对象上，其实也是有办法的。绑定到vue上，一般就是在初始化时绑定到vue.prototype上；也可以在后面需要时在组件内或者模块内引用。配置文件的格式可以有多种，比如json、xml或者yml都可以。
具体用法就是类似于这种,以json为例：

const config = require("public/config/config.json")

配置文件放在了public下，打包时不会被编译，部署到线上后，也可以随时修改配置文件，实现了热更新目的。
如果是xml或者yml格式的，其实原理一样，不过要多一步下载并解析文件的过程，xml就比较简单了，yml可以参考阮一峰(http://www.ruanyifeng.com/blog/2016/07/yaml.html)的文章。

最后总结下，本文主要就vue开发中用到的资源配置分享了一些经验，希望对你有用，欢迎点赞分享，谢谢支持！