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

Implementing CommonJS modularity in browsers without compilation/server

Table of contents introduction 1. What is one-cli...

Security considerations for Windows server management

Web Server 1. The web server turns off unnecessar...

In-depth analysis of the Tomcat server of Centos 7 system

Table of contents 1. The origin of tomcat 1. Tomc...

Detailed explanation of Nginx's rewrite module

The rewrite module is the ngx_http_rewrite_module...

CSS achieves highly adaptive full screen

When writing my own demo, I want to use display:f...

How to set up the use of Chinese input method in Ubuntu 18.04

In the latest version of Ubuntu, users no longer ...

Linux (CentOS7) installs Tomcat and sets Tomcat as a startup item (taking tomcat8 as an example)

Table of contents Install Tomcat Download Tomcat ...

How to deploy MongoDB container with Docker

Table of contents What is Docker deploy 1. Pull t...

How to get USB scanner data using js

This article shares the specific process of js ob...

Some lesser-known sorting methods in MySQL

Preface ORDER BY 字段名升序/降序, I believe that everyon...

MYSQL database GTID realizes master-slave replication (super convenient)

1. Add Maria source vi /etc/yum.repos.d/MariaDB.r...

Detailed explanation of data sharing between Vue components

Table of contents 1. In project development, the ...

A brief discussion on the magic of parseInt() in JavaScript

cause The reason for writing this blog is that I ...

Complete steps to build a squid proxy server in linux

Preface This article mainly introduces the releva...

Detailed explanation of how to use the vue3 Teleport instant movement function

The use of vue3 Teleport instant movement functio...