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

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

背景

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

// src/image-position.js
export 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.js
module.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配置文件的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法

    vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法

    由于最新版本的vue-cli已经放弃dev-server.js,需在webpack.dev.conf.js配置才行 新版本的webpack.dev.conf.js配置如下: const express require('express') const app =express() var appData = require('..data.json') var seller = appData.seller var goods = appData.goods var ratings = appD

  • 如何配置vue.config.js 处理static文件夹下的静态文件

    最近开发过程中遇到个小需求,需要根据需求动态配置一些静态数据,但我不想直接把这个静态文件引入进来,build时就会把数据打包到js文件中,造成js文件很大:呃呃....(ps:就想给自己找点别扭) 回头看一下项目,果断的在根目录下创建一个static/test.json文件,在目标页面下fetch获取这个json文件里的数据: fetch("../static/test.json") .then(res => res.json()) .then(res => { //获取到

  • vue-cli脚手架build目录下utils.js工具配置文件详解

    此文章用来解释vue-cli脚手架build目录中的utils.js配置文件 1.此配置文件是vue开发环境的wepack相关配置文件,主要用来处理css-loader和vue-style-loader 2.关于注释 •当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看 3.上代码 // 引入nodejs路径模块 var path = require('path') // 引入config目录下的index.js配置文件 var config = requir

  • vue-cli脚手架config目录下index.js配置文件的方法

    此文章介绍vue-cli脚手架config目录下index.js配置文件 1.此配置文件是用来定义开发环境和生产环境中所需要的参数 2.关于注释 当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看 3.上代码 // see http://vuejs-templates.github.io/webpack for documentation. // path是node.js的路径模块,用来处理路径统一的问题 var path = require('path')

  • 详解vue-cli中的ESlint配置文件eslintrc.js

    本文讲解vue-cli脚手架根目录文件.eslintrc.js,分享给大家,具体如下: 1.eslint简介 eslint是用来管理和检测js代码风格的工具,可以和编辑器搭配使用,如vscode的eslint插件.当有不符合配置文件内容的代码出现就会报错或者警告 2.安装exlint npm init -y npm install eslint --save-dev node_modules\.bin\eslint --init 初始化配置文件,此配置文件配置好之后,vscode编辑器自动识别

  • 详解vue-cli脚手架build目录中的dev-server.js配置文件

    本文系统讲解vue-cli脚手架build目录中的dev-server.js配置文件 1.这个配置文件是命令npm run dev 和 npm run start 的入口配置文件,主要用于开发环境 2.由于这是一个系统的配置文件,将涉及很多的模块和插件,所以这部分内容我将分多个文章讲解,请关注我博客的其他文章 3.关于注释 •当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看 4.上代码 // 导入check-versions.js文件,并且执行导入的函数,用

  • Vue的Eslint配置文件eslintrc.js说明与规则介绍

    默认eslint规则: 代码末尾不能加分号 ; 代码中不能存在多行空行: tab键不能使用,必须换成两个空格: 代码中不能存在声明了但未使用的变量: 最简单的方法,关闭eslint检测,其实很简单,把 build/webpack.base.conf.js 配置文件中的eslint rules注释掉即可. 但不推荐这么做,eslint检测是有必要的,能保持良好的代码风格. 第二种方法就是把不符合自己习惯的规则去掉,找到配置文件,名字以.eslintrc.*为名. module.exports =

  • 解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题

    解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题

    1.在vue项目根目录下新建vue.config.js(不是在src下面) vue.config.js配置文件: module.exports = { // 基本路径 baseURL已经过时 publicPath: './', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build with in-browser compiler? // https://vu

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

    目录 背景 实现 补充vue-cli2.0下如何配置 总结 背景 项目中有一个本地配置文件: // src/image-position.js export default { label: '首页', value: 'home', data: [ { label: '轮播', value: 'carousel' } ] } 如何引用一个本地文件大家都知道: import ImagePosition from './image-position.js' 现在需要把image-position.j

  • elementui+vue+axios实现文件上传本地服务器

    elementui+vue+axios实现文件上传本地服务器

    本文实例为大家分享了elementui+vue+axios实现文件上传本地服务器的具体代码,供大家参考,具体内容如下 文件上传的原理 加入文件上传的依赖 <!--文件上传的依赖-->     <dependency>       <groupId>commons-fileupload</groupId>       <artifactId>commons-fileupload</artifactId>       <versio

  • vue 打包后的文件部署到express服务器上的方法

    vue 简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. vue是目前最流行的前端框架,今天要介绍的是如何利用vue+webpack+express的方式进行前后端分离的开发. 1.首先用vue-cli初始化项目目录 vue init webpack pro-name cd pro-name && npm ins

  • cropper js基于vue的图片裁剪上传功能的实现代码

    前些日子做了一个项目关于vue项目需要头像裁剪上传功能,看了一篇文章,在此基础上做的修改完成了这个功能,与大家分享一下.原文:http://www.jb51.net/article/135719.htm 首先下载引入cropper js, npm install cropper js --save 在需要的页面引入:import Cropper from "cropper js" html的代码如下: <template> <div id="demo&quo

  • Vue 图片压缩并上传至服务器功能

    本文主要讲解基于 Vue + Vant ,实现移动端图片选择,并用 Canvas 压缩图片,最后上传至服务器.还会封装一个工具类,方便直接调用. 一.工具类封装 废话不多说先上代码,封装一个 CompressImageUtils 工具类: ** * 图片压缩工具类 * 最大高度和最大宽度都为 500,如果超出大小将等比例缩放. * * 注意可能出现压缩后比原图更大的情况,在调用的地方自己判断大小并决定上传压缩前或压缩后的图到服务器. */ // 将base64转换为blob export fun

  • 使用vue打包进行云服务器上传的问题

    vue中目录最后的vue.config.js文件中第27行的pulicpath改成./ src目录下的man.js中30到33行注释掉 将目录中的.env.development和.env.production中的 改成自己的域名和端口号 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!接下来就是打包环节了 打开vue的命令提示符 输入命令:npm run build:prod 进行打包 打包完成后会出现build目录的同级下一个出来一个打包好的文件

  • 在Linux服务器上部署vue项目

    在Linux服务器上部署vue项目

    案例一 vue-cli构建vue3项目,将项目上传到Linux服务器,服务器安装node,并启动vue项目 首先本地有一个vue项目,启动后可正常访问 本地打包后,也可直接访问 若打包后的index.html页面显示空白,需在项目的根路径下新建vue.config.js,再重新打包,参考 Linux服务器安装nodejs,参考 # 下载node压缩包,在哪条路径下执行该命令,就会下载到哪条路径下 wget https://npm.taobao.org/mirrors/node/v12.16.1/

  • vue router下的html5 history在iis服务器上的设置方法

    vue router下的html5 history在iis服务器上的设置方法

    首先先照搬下官网的介绍 当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看! 不过这种模式要玩好,还需要后台配置支持.因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了. 所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个index.html 页面,

  • 查看linux服务器上mysql配置文件路径的方法

    查看linux服务器上mysql配置文件路径的方法

    在类NUIX的系统中,配置文件的位置一般在/etc/my.cnf 或者 /etc/MySQL/my.cnf 我们见过有些人尝试修改配置文件但是不生效,因为他们修改的并不是服务器读取的文件.例如Debian下,/etc/mysql/my.cnf才是MySQL读取的配置文件,而不是/etc/my.cnf. 如果不知道当前使用的配置文件路径,可以尝试下面的操作: 对于服务器上只有一个MySQL实例的典型安装,这个命令很有用 以上就是小编为大家带来的查看linux服务器上mysql配置文件路径的方法全部

  • CentOS 8.2服务器上安装最新版Node.js的方法

    CentOS 8.2服务器上安装最新版Node.js的方法

    Node.js是一个开源JavaScript运行时环境.在这里,您将学习如何在CentOS 8服务器上安装Node.js. 什么是Node.js? Node.js是一个开放源代码,跨平台的后端JavaScript运行时环境,可在Web浏览器外部执行JavaScript代码.Node.js使开发人员可以使用JavaScript编写命令行工具并进行服务器端脚本编写,即在服务器端运行脚本以在将页面发送到用户的Web浏览器之前生成动态网页内容.因此,Node.js代表了一个" JavaScript无处不

随机推荐