vue完成项目后,如何打包成静态文件,

打包:

1、vue.config.js配置,如果用默认的,打包以后,会找不到文件

// 公共路径(必须有的)
publicPath: "./",
// 输出文件目录
outputDir: "dist",
// 静态资源存放的文件夹(相对于ouputDir)
assetsDir: "assets",
productionSourceMap: true, // 不需要生产环境的设置false可以减小dist文件大小,加速构建

2、修改axios的url配置

打包成静态文件以后,将dist文件里的内容拷贝到tomcat的文件夹,启动tomcat,路径加文件名就可以访问到项目

优化:

在package.json的build后面添加--report,打包以后可以生成report.html文件,用来查看打包以后各文件的大小

今天讲项目打包以后,总大小是10MB,发现主要是element-ui、echarts和jquery大

解决办法是:

1、把这些使用cdn引入,放在index.html文件

    <script crossorigin="anonymous" integrity="sha384-9Jr6d8CsEUcQUN6knni8ysVfdmxMXdMdsVxZg11vjeNemsCcm8GSxFhWFgHRtn31" src="https://lib.baomitu.com/echarts/4.2.1/echarts-en.common.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
<script src="https://unpkg.com/vuex@3.1.1"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.3.9/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui@2.3.9/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>

2、在vue.config.js配置

configureWebpack:() => {
return {
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
'echarts': 'echarts',
'jquery': 'jquery',
'element-ui': 'ELEMENT',
'lodash': 'lodash',
'html2canvas': 'html2canvas'
}
}
},

3、main.js

import ElementUI from 'element-ui'

Vue.use(ElementUI)

删除

Vue.prototype.$echarts = echarts

删除   组件里直接用 echarts调用

4、备注:

(1)、启动项目之前,运行npm install

(2)、element-ui和vuex还是需要npm 安装的

因为项目中有引入这俩快内容

store index.js

vue系列之项目打包的更多相关文章

  1. vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大

    从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供 ...

  2. vue系列之项目优化

    webpack中的Code Splitting Code Splitting是什么以及为什么 在以前,为了减少HTTP请求,通常地,我们会把所有的代码都打包成一个单独的JS文件,但是,如果这个文件体积 ...

  3. 基于vue脚手架的项目打包上线(发布)方法和误区

    最近要把vue脚手架开发的一个项目上线,只知道vue脚手架是基于node的服务端项目,那么只需要 npm run dev 就可以轻松启动整个项目,当我想当然的给服务器配置合适的node环境(这里也遇到 ...

  4. 将Vue移动端项目打包成手机app---HBuilder

    将移动端页面打包成app 1.使用 HBuilder 直接编译打包 点击左上角 文件>打开目录>选择目录  选择用Webpack打包好的dist文件目录 由于我添加到项目了,所以会显示该项 ...

  5. vue -- vue-cli webpack项目打包后自动压缩成zip文件

    用vue2.0开发项目,使用npm run build 命令 ,但是只会生成dist文件夹,以下是生成zip压缩包方法 1,插件安装 webpack插件安装 filemanager-webpack-p ...

  6. vue系列之项目结构

    参考地址:链接 build webpack配置相关 config webpack配置相关 node_modules  npm install 安装的依赖代码库 src  存放项目源码 static 存 ...

  7. vue之项目打包部署到服务器

    这是今年的第一篇博客.整理一下vue如何从项目打包到部署服务器,给大家做下分享,希望能给大家带来或多或少的帮助,喜欢的大佬们可以给个小赞,如果有问题也可以一起讨论下. 第一步:这是很关键的一步.打开项 ...

  8. Storm系列(三):创建Maven项目打包提交wordcount到Storm集群

    在上一篇博客中,我们通过Storm.Net.Adapter创建了一个使用Csharp编写的Storm Topology - wordcount.本文将介绍如何编写Java端的程序以及如何发布到测试的S ...

  9. Vue实战Vue-cli项目构建(Vue+webpack系列之一)

    用Vue比较长一段时间了,大大小小做了一些项目,最近想总结一下知识点,出一个Vue+webpack系列,先从项目构建说起--vue-cli. 由于是Vue+webpack这里就不赘述git那些东西,默 ...

随机推荐

  1. TCP UDP 封包过程

    数据封装 注: Ethernet 协议规定 DatalinkHeader 是 14 bytes,分别是6字节目的MAC地址.6字节源MAC地址.2字节数据包类型: 4字节FCS(frame check ...

  2. solr6.4.2之webservice兼容升级

    摘要:这次solr底层升级是一次比较大的升级.从底层搜索引擎 solr4.8 升级到 solr6.4.2,由于solr底层从6.x开始以来的jdk必须指定为1.8,而且很多内部实现类都已经废弃或者干脆 ...

  3. Ubuntu 16.04配置VNC进行远程桌面连接

    1.安装 $sudo apt-get install xfce4 $sudo apt-get install vnc4server $sudo apt-get install xrdp 2.启动vnc ...

  4. python---web框架本质(2)

    目录 controllers //存放控制方法 models //存放模型方法 views //存放视图模板 index.html new.html show.html index.py //用户访问 ...

  5. Calendar 日历类的时间操作

    我们经常会涉及到对时间的处理,例如登陆网站,我们会看到网站首页显示XXX,欢迎您!今天是XXXX年....某些网站会记录下用户登陆的时间,比如银行的一些网站,对于这些经常需要处理的问题,Java中提供 ...

  6. 06-开闭原则(OCP)

    1. 背景 在软件的生命周期内,因为变化.升级和维护等原因需要对软件原有代码进行修改时,可能会给旧代码中引入错误,也可能会使我们不得不对整个功能进行重构,并且需要原有代码经过重新测试. 2. 定义   ...

  7. 用Emacs的这些年

    读技术博客时发现又有人提起我曾写的那篇口水文章 为何Emacs和Vim被称为两大神器.写那篇文章时,我还在Vim和Emacs之间摇摆.当然主要在用vim,博士学位论文和所有的国际会议文章都是用Vim编 ...

  8. MIPS架构上函数调用过程的堆栈和栈帧

    转载于CSDN:http://blog.csdn.net/do2jiang/article/details/5404566 在计算机科学中,Call stack是指存放某个程序的正在运行的函数的信息的 ...

  9. tessaract ocr简介

    Tesseract的历史Tesseract是一个开源的OCR引擎,惠普公司的布里斯托尔实验室在1984-1994年开发完成.起初作为惠普的平板扫描仪的文字识别引擎.Tesseract在1995年UNL ...

  10. mysql数据库备份和恢复

    1.数据库备份 mysqldump -uroot -proot jira736 > jira736.sql 2.数据库恢复 mysql -uroot -proot jira762 < ji ...