Vue 如何import服务器上的js配置文件

目录

• 背景
• 实现
• 补充vue-cli2.0下如何配置
• 总结

背景

项目中有一个本地配置文件：

// src/image-posITion.jsexport default {
    label: '首页',    value: 'home',    data: [      {
        label: '轮播',        value: 'carousel'      }
    ]}
    

如何引用一个本地文件大家都知道：

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

现在需要把image-position.js文件丢到服务器上去，得到它的链接：

xxx.COM/static/imag…

这个时候你直接引用文件地址自然是行不通的。

import ImagePosition from 'https://xxx.com/static/image-position.js'// ERROR This dePEndency was not found

实现

首先对image-position.js做一点小改造，暴露一个全局对象ImagePosition

// 改造后的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: '首页',    value: 'home',    data: [      {
        label: '轮播',        value: 'carousel'      }
    ]  }
    ;
}
    )));
    

在vue.config.js文件里添加externals。

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

index.htML 区分环境并引入js文件。

// 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>
    

结束上面的步骤后就可以愉快的引用image-position.js文件了。

import ImagePosition from 'image-position'console.LOG(ImagePosition)// {
label: '首页',value: 'home',data: [{
label: '轮播', value: 'carousel'}
]}
    

补充vue-cli2.0下如何配置

// build/webpack.base.conf.jsmodule.exports = {
  externals: {
    // 新增    '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>
    

总结

在Vue项目的打包体积优化中，CDN加速是常用的一种手段，上面其实就是cdn加速的实现内容，把第三方库通过script标签引入，大大减少打包的vendor.js文件大小。

当我们想把本地文件放到服务器远程化时，关键在于实现步骤的第一步，其他的内容跟配置cdn加速的过程是一样的。

以上就是Vue 如何import服务器上的js配置文件的详细内容，更多关于Vue import js配置文件的资料请关注其它相关文章！

• 解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
• 如何配置vue.config.js 处理static文件夹下的静态文件
• Vue的Eslint配置文件eslintrc.js说明与规则介绍
• vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
• vue-cli脚手架build目录下utils.js工具配置文件详解
• vue-cli脚手架config目录下index.js配置文件的方法
• 详解vue-cli脚手架build目录中的dev-server.js配置文件
• 详解vue-cli中的ESlint配置文件eslintrc.js

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！