How to import js configuration file on Vue server

How to import js configuration file on Vue server

background

There is a local configuration file in the project:

// src/image-position.js
export default {
    label: 'Homepage',
    value: 'home',
    data: [
      {
        label: 'Carousel',
        value: 'carousel'
      }
    ]
}

Everyone knows how to reference a local file:

import ImagePosition from './image-position.js'

Now you need to drop the image-position.js file onto the server and get its link:

xxx.com/static/imag…

At this time, it is naturally not feasible for you to directly quote the file address.

import ImagePosition from 'https://xxx.com/static/image-position.js'

// ERROR This dependency was not found

accomplish

First, make a small modification to image-position.js to expose a global object ImagePosition

// Modified image-position.js

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' 
    ? module.exports = factory() 
    : typeof define === 'function' && define.amd 
    ? define(factory) 
    : (global = global || self, global.ImagePosition = factory());
}(this, (function () {
  'use strict';
  
  return {
    label: 'Homepage',
    value: 'home',
    data: [
      {
        label: 'Carousel',
        value: 'carousel'
      }
    ]
  };
})));

Add externals in vue.config.js file.

module.exports = {
  configureWebpack: config => {
    config.externals = {
      'image-position': 'ImagePosition'
   }
  }
}

index.html distinguishes the environment and imports js files.

// public/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <% if (NODE_ENV == 'production') { %>
      <script src="http://xxx.com/static/image-position.js"></script>
    <% } else { %>
      <script src="http://test.xxx.com/static/image-position.js"></script>
    <% } %>
  </body>
</html>

After completing the above steps, you can happily reference the image-position.js file.

import ImagePosition from 'image-position'
console.log(ImagePosition)
// {label: 'Home', value: 'home', data: [{label: 'Carousel', value: 'carousel'}]}

Supplement how to configure under vue-cli2.0

// build/webpack.base.conf.js
module.exports = {
  externals: {
    // Add 'image-position': 'ImagePosition'
  }
}

// index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <% if (process.env == 'production') { %>
      <script src="http://xxx.com/static/image-position.js"></script>
    <% } else { %>
      <script src="http://test.xxx.com/static/image-position.js"></script>
    <% } %>
  </body>
</html>

Summarize

In the packaging volume optimization of Vue projects, CDN acceleration is a commonly used method. The above is actually the implementation content of CDN acceleration. The third-party library is introduced through the script tag, which greatly reduces the size of the packaged vendor.js file.

When we want to remotely place local files on a server, the key lies in the first step of the implementation process. The rest of the content is the same as the process of configuring CDN acceleration.

The above is the details of how Vue imports the js configuration file on the server. For more information about Vue import js configuration file, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • Solve the problem that Vue-cli3 does not have a vue.config.js folder and configures the domain name of the vue project
  • How to configure vue.config.js to process static files in the static folder
  • Vue's Eslint configuration file eslintrc.js description and rules introduction
  • There is no dev-server.js file in the build folder of vue-cli to configure mock data
  • Detailed explanation of the utils.js tool configuration file in the vue-cli scaffolding build directory
  • Method of index.js configuration file in vue-cli scaffolding config directory
  • Detailed explanation of the dev-server.js configuration file in the vue-cli scaffolding build directory
  • Detailed explanation of ESlint configuration file eslintrc.js in vue-cli

<<:  View the number of files in each subfolder of a specified folder in Linux

>>:  mysql5.7.19 winx64 decompressed version installation and configuration tutorial

Recommend

Essential tools for web design: Firefox Web Developer plugin CSS tool set tutorial

The plugin is installed in the Firefox browser. T...

In-depth explanation of the principle of MySQL Innodb index

introduction Looking back four years ago, when I ...

Summary of the main attributes of the body tag

bgcolor="text color" background="ba...

SQL method for calculating timestamp difference

SQL method for calculating timestamp difference O...

The difference between VOLUME and docker -v in Dockerfile

There are obvious differences between volume moun...

Example of how to quickly build a LEMP environment with Docker

LEMP (Linux + Nginx + MySQL + PHP) is basically a...

Share MySql8.0.19 installation pit record

The previous article introduced the installation ...

Some tips on deep optimization to improve website access speed

<br />The website access speed can directly ...

How to create a Docker repository using Nexus

The warehouse created using the official Docker R...

How to use VUE to call Ali Iconfont library online

Preface Many years ago, I was a newbie on the ser...

Solution to the problem of a large number of php-cgi.exe processes on the server causing the CPU to occupy 100%

Optimize the fastcgi configuration file fcgiext.i...

Eclipse configures Tomcat and Tomcat has invalid port solution

Table of contents 1. Eclipse configures Tomcat 2....

Docker volumes file mapping method

background When working on the blockchain log mod...

Example of how to implement embedded table with vue+elementUI

During my internship in my senior year, I encount...

Usage and principles of provide and inject in Vue3

Preface: When passing data between parent and chi...