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

Usage and difference of Js module packaging exports require import

Table of contents 1. Commonjs exports and require...

JavaScript to achieve time range effect

This article shares the specific code for JavaScr...

Solve the problem of black screen when starting VMware virtual machine

# Adjust VMware hard disk boot priority Step 1: E...

Docker uses busybox to create a base image

The first line of a Docker image starts with an i...

Solution to index failure in MySQL due to different field character sets

What is an index? Why create an index? Indexes ar...

Specific method of viewing user authorization information in mysql

Specific method: 1. Open Command Prompt 2. Enter ...

Implementation steps for docker deployment of springboot and vue projects

Table of contents A. Docker deployment of springb...

Front-end JavaScript Promise

Table of contents 1. What is Promise 2. Basic usa...

Detailed tutorial on installing Python 3.6.6 from scratch on CentOS 7.5

ps: The environment is as the title Install possi...

Learn how to use JavaScript's new Element Traversal property to traverse child elements

Table of contents 1. ChildNodes attribute travers...

The process of deploying a project to another host using Jenkins

environment Hostname ip address Serve Jenkins 192...

Using Vue3 (Part 1) Creating a Vue CLI Project

Table of contents 1. Official Documentation 2. Cr...

Dynamic SQL statement analysis in Mybatis

This article mainly introduces the dynamic SQL st...

Vue Element front-end application development conventional Element interface components

Table of contents 1. List interface and other mod...

Thirty HTML coding guidelines for beginners

1. Always close HTML tags In the source code of p...