Of Stack

Vue How to js Configuration Files on import Servers

  • 2021-11-01 23:41:19
  • OfStack
Directory background
Realization
Summary of how to configure under supplementary vue-cli2.0

Background

There is 1 local configuration file in the project: 


// src/image-position.js
export default {
    label: ' Home page ',
    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 to the server and get its link:

xxx. com/static/imag …

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


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

// ERROR This dependency was not found

Realization

First, make a small modification to image-position. js, exposing 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: ' Home page ',
    value: 'home',
    data: [
      {
        label: ' Carousel ',
        value: 'carousel'
      }
    ]
  };
})));

Add externals to the vue. config. js file. 


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

index. html differentiates environments and introduces 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 page ',value: 'home',data: [{label: ' Carousel ', value: 'carousel'}]}

How to Configure Under Supplementary 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 optimization of packaging volume of Vue project, cdn acceleration is a commonly used means, which is actually the implementation content of cdn acceleration. The third party library is introduced through script tag, which greatly reduces the size of packaged vendor. js file.

When we want to put local files on the server remotely, the key is to implement step 1, and the rest is the same as the process of configuring cdn acceleration.

The above is how js import server js configuration file details, more information about Vue import js configuration file please pay attention to other related articles on this site!

Related articles: