vue + webpack 多模块静态文件导入

Share

多个模块导入静态文件

项目结构目录
Image text

官方推荐的css及js引用方式如下:

<!-- 引入样式 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.2.0/theme-chalk/index.css" rel="stylesheet"> 
<!-- 引入组件库 -->
<script src="https://lib.baomitu.com/vue/2.4.4/vue.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.2/vue-router.min.js"></script>
<script src="https://unpkg.com/element-ui@2.2.0/lib/index.js"></script>

这种方式引入,如果环境只有内网,没有外网的话,会导致页面直接空白.（或cdn 访问不通、不在维护等……）

很简单把css的href及js的src的网址输入浏览器可以得到css和js的源码,直接拷贝到本地即可.

index.html 引入

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>xxxxx</title>
  <link href="/static/css/element-ui2.2.0/index.css" rel="stylesheet">
  <script src='/static/js/vue2.7.0/vue.min.js'></script>
  <script src='/static/js/vue-router3.0.2/vue-router.min.js'></script>
  <script src='/static/js/element-ui@2.2.0/index.js'></script>
</head>

静态文件配置（多模块、多服务、各服务端口不同）

# config 配置信息
assetsSubDirectory: 'static',
assetsPublicPath: '/',

# 项目是 vue+webpack 多模块
 开发环境中多个模块需要启动多个服务，各服务监听的端口不同，使用离线存储数据时存在跨域不共通的问题。
 解决思路： 采用第三方代理服务器，前端所有的请求到代理服务器由代理服务器进行请求分发
 实现：采用gulp-connect 做为代理服务器，代理转发的具体代码如下

const gulp = require('gulp');
const connect = require('gulp-connect');
const proxy = require('http-proxy-middleware');
const ipLib = require('ip');
const path = require('path');
const fs = require('fs')


let currentIp = ipLib.address()
let globPath = path.resolve(__dirname, '../src/assets/js/global.js')
const proxyPort = '7890'

gulp.task('server', function(){
  connect.server({
    port: proxyPort,
    host: '0.0.0.0',
    middleware: function(connect, opt) {
      return [
        proxy('/login', {
          target: 'http://www.localhost:8080', // target host
          changeOrigin: true,               // needed for virtual hosted sites
          ws: true,
          router: { // login
            [ currentIp + ':'+proxyPort] : 'http://' + currentIp + ':10258/'
          }
        }),
        proxy('/static', {
          target: 'http://www.localhost:8080', // target host
          changeOrigin: true,               // needed for virtual hosted sites
          ws: true,
          router: { // static
            [ currentIp + ':'+proxyPort] : 'http://' + currentIp + ':10258/'
          }
        }),
      ]
    }
  })
})

本地使用element ui 图标不显示或显示错乱的问题

但是问题来了,element-ui的index.css拷贝本地之后,会发现图标无法正常显示了.

原因

在本地的index.css中发现如下代码是网络请求icon的

@charset "UTF-8";.el-pagination--small .arrow.disabled,.el-table .hidden-columns,.el-table td.is-hidden>*,.el-table th.is-hidden>*,.el-table--hidden{visibility:hidden}@font-face{font-family:element-icons;src:url(fonts/element-icons.woff) format("woff"),url(fonts/element-icons.ttf) format("truetype");font-weight:400;

解决办法

访问 https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.2.0/theme-chalk/fonts/element-icons.woff
https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.2.0/theme-chalk/fonts/element-icons.ttf

文件自动下载下来,放到项目的/static/css/element-ui2.2.0/fonts文件夹下即可

Image text