A complete VUE system must contain all kinds of static resources, such as images, style files, configuration files (various types). In VUE-cli3 there is a public folder for static resource files and other files that need not be packaged. If images and style files are called static resources and the contents of configuration files are called static data, how can these resources and data be configured correctly? Take a look!

First, style resource address configuration

There is a requirement that an image be used in a project, be developed in folder A, and packaged and deployed in folder B. Vue-loder does not convert the path in the tag, meaning that if your image style is written inside the style tag, the address will not change to the B folder after packaging. So how do you solve this problem? There are two ways:

Put in the style file and import

1. Write styles to a CSS file and import them in main.js or.vue files.

import "path/xxx.css"

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

Require in your code

2. Everything in webpack is modular, so you can put images require in:

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

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

Copy the code

Iframe references HTML files

Sometimes a project references an IFrame tag in a VUE component, either as an external url or as a local static HTML. If it is local, where does it fit?

where

Vuecli2 in static folder, vuecli3 in public folder

How to reference

In Vuecli2, static folders are level with SRC, and references are relative addresses, like this:

src=".. /.. /.. /.. /static/videos/video.html"
Copy the code

In Vuecli3, the static folder is replaced by the public folder, and the HTML page is in the public folder, as shown below. SRC is also level with SRC, but references are different if you write it like this.. /.. /.. /public/video.html, you can’t find the file.

/public/video.html
Copy the code

Any static resources placed in the public folder are simply copied without webPack compilation. You need to refer to them by absolute path. Vuecli3-public has a detailed description about public, please check it out.

3. Static hot update configuration files

Look at the headline, Static Hot Update Profile, which is a term I coined myself because I can’t find the right word for it. Most people focus on configuration related things like environment variables, vue.config.js, etc., but these files can only be restarted or repackaged if they are modified.

Static hot update configuration files have two meanings: one is static, we know that static files, such as images, are in the public folder, when packaged, they are not compiled, and when used, they are directly referenced in the code; The second is hot update, which is easy to understand. I have modified the configuration file, and the corresponding system has changed accordingly. Basically, my configuration file is in the public folder, the package is not compiled, and is copied to the deployment package intact; At deployment time, I can change the system based on the configuration file by directly modifying it.

If you use an online dynamic deployment system, it doesn’t seem like much of a problem to change to automatic deployment. But in the absence of automated deployment, it seems necessary to implement a hot-update configuration, so let’s see how.

Now that the configuration file requirements are clear, the location is set in public, so how to implement it?

The idea here is to define a global object, so essentially vue is bound to window, so I’ll just bind my configuration file to Window, that’s one way; Alternatively, you can bind to vue like this: vue.prototype. XXX; Alternatively, you can reference it directly within a component or module. The latter two are essentially one way. Let’s look at the implementation process:

Define window object properties

If bound to a Window, the configuration file can only be referenced in one place, from the system start page index.html. The method of reference is specified in vue-CLI documentation as follows:

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

I can define the config file as follows. The key is to bind it to the window, because referencing it in index.html is independent of the vue application. Fortunately, the Vue object itself is bound to the Window as well.

; (function(){
    const config = {}
    window.config = config; }) ()Copy the code

This file should be stored in the public folder, and the startup page can be directly referenced. After the deployment is packaged, you can modify the specific configuration on the server, without packaging the deployment again. Note that this configuration file can only be used in ES5 syntax because modules cannot be directly referenced in script tags. Another reason is that with ES6, if the configuration file references other modules, the configuration file is harder to reference directly, because the reference relationship changes after packaging, unless it is all absolute path references in public.

Bind vUE, component/module in-reference

The previous one binds to the window and is referenced directly in index.html, which has certain configuration file requirements. If I wanted to bind the configuration file to a VUE object, I could. Bind to vue. Prototype on initialization; It can also be referenced later within a component or module as needed. Configuration files can be in a variety of formats, such as JSON, XML, or YML. The usage is similar to this, using JSON as an example:

const config = require("public/config/config.json")
Copy the code

The configuration file is stored in the public directory, so it will not be compiled when being packaged. After being deployed online, the configuration file can be modified at any time to achieve hot update. If it is in XML or YML format, the principle is the same, but XML is simpler with one more step to download and parse the file. Yml can refer to Ruan Yifeng’s article.

Finally, this article mainly used in the development of VUE resource configuration to share some experience, I hope it is useful to you, welcome to like to share, thank you for your support!