vuecli3（vuecli3打包配置）

本篇文章给大家谈谈vuecli3，以及vuecli3打包配置对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue cli3项目打包部署到tomcat服务器运行
• 2、vue-cli3 兼容 IE 浏览器的不完全踩坑之旅
• 3、vue-cli3 打包优化
• 4、VueCLI3打包优化--抽离依赖包
• 5、VUE CLI3项目搭建 ESLint配置

vue cli3项目打包部署到tomcat服务器运行

步骤：

一、找到文件vue.config.js，没有则自己创搜唯建一个

二、编写vue.config.js的内容

三、修改路由方式，修改为hash，文件位置自己找，vuecli3中在router.ts文件中

四、添加空路由

找到编译好的文件夹，如果作为独立项目，直接拷贝后放到Tomcat里即可，如果是放到另外一个项目中使用，则拷贝到其它项目中去

七、适配到EOS中使用

7.1、改变原EOS项目中的首页配置

在webapps\default\WEB-INF\web.xml中配置

7.2、修世孝培改原EOS项目中的登录成功的跳转页，也是项目主页

在webapps\default\coframe\auth\慎并index.jsp中配置

[img]

vue-cli3 兼容 IE 浏览器的不完全踩坑之旅

vue-cli2 兼容 IE 浏览器的不完全踩坑之旅

IE 浏览器真是不合群又不懂事，让无数开发者操碎了心啊···

本文会持续补充遇到的相关链哗IE兼容问题和解决方案！（兼容=IE9）

生产环境

vue 2.6.10 index.html中以cdn方式引入

axios 0.18.0

安装依赖

在入口文件 main.js 引入

在 babel.config.js 中按照以下内容修改

安装依赖

在入口文件 main.js 引入

发送不了请求也可能和axios版本过低有关系，本文使用的 axios 版本 0.18.0 ;

我说我明明刚添加完一项数据，为什么再打开页面刷新的时候斗备没有呢？？

都是ie这不合群的浏览器缓存get请求搞的鬼！

现提供两种我已经测试过的方法；

以下两种方法都是在封棚销行装axios请求拦截器中修改；

方法一

设置请求头，禁止缓存

方法二

get请求的参数中增加时间戳或是随机数

和 vue-cli2 兼容 IE

)一样

有一个项目使用了 element-ui ，其中有一个场景是表单验证修改一个信息，发现 v-model 不能响应退格键，不知道是ele原因还是vue的原因，解决方案整理中

未完待续...

vue-cli3 打包优化

当项目较大时往往会出现打包之后首屏加载时间较长，这样会导致用户体验较差，因此可以开启gzip压缩功能

1）如果是vue2.x，在vue项目中安装老桐乎依赖并将config.js中的productionGzip改为true，轮握开启Gzip压缩，npm install --save-dev compression-webpack-plugin

运行npm run build 打包项目，这时如果有提侍悉示报错ValidationError: Compression Plugin Invalid Options，则需要将build中的webpack.prod.conf.js中CompressionWebpackPlugin的设置由asset改为

filename，如图所示

再次运行npm run build打包，如果还有报错，提示TypeError: Cannot readproperty 'emit' of undefined。据我查证，是安装的compression-webpack-plugin依赖有问题，需要卸载compression-webpack-plugin更改安装低版本：npm install --save-dev compression-webpack-plugin@1.1.2

最后再次打包

当发现打包文件中有很多.gz的文件时即是打包成功，最后后端服务器开启gzip配置就愉快的配置完成，再次打开地址后会发现首屏速度快了很多

2）  如果是vue-cli3的项目，在开启gzip时会稍有区别，在vue.config.js 中配置，先安装依赖cnpm i -D compression-webpack-plugin

    

VueCLI3打包优化--抽离依赖包

项目开发中，使用了很多依赖包，如 Vue 、路由管理 Vue-router 、状态管理 Vuex 、UI组件库( ElementUI 、 Vant )、图表（ echarts ）等。打包构建，发现有一些包体积过大，会影响首页加载速度。如下所示：

从上图的分析包中，可以将以下插件抽离：

需要删除的依赖包

VueCLI3自带了 webpack analzer ,可通过如下命令即可生成分析包内容，在 dist/report.html

更多请查看：

减少打含宴包体积、加快打包速度，常茄橘规的优化有以下两种：

按需加载是通过只引用使用的组件来减少体积，这颤老团就会有一个问题：如果项目重度依赖第三方插件（如 ElementUI 、 vant ），那么此方案将无法减少打包的体积。

这里选择CDN的方式， 配置流程 ：

可根据环境变量，仅在线上采取使用CDN,开发环境直接使用npm依赖包即可。

进行包分离以后，打包结果：

vue.config.js 的pages为：

修改如下的地方：

外部扩展(externals)

使用webpack的externals来指定echarts无法减少包的大小

vue-cli利用webpack-bundle-analyzer分析构建产物

VUE CLI3项目搭建 ESLint配置

1.查看代理：npm get registry

2.设置淘宝镜像

2.1临时使用.

npm --registry install express

2.2持久使用.

npm config set registry

2.3验证是否成功

npm config get registry 或 npm info express

2.4.还原：

npm config set registry

1.npm install -g n

2.n stable （最新稳定版本）或者 n latest （最新版本）

1.安装新包：npm install -g @vue/cli

2.查看版本：vue --version 或者 vue -V

3.vue create projectName

4.Check the features needed for your project:

5.Use history mode for router

6.Pick a CSS pre-processor

7.Pick a linter / formatter config

8.Pick additional lint features

9.Pick a unit testing solutio

10.Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?

11.Save this as a preset for future projects

1.安装：npm install vue-i18n 或者 vue add i18n (Vue CLI 3)

2.选择默认环境：The locale of project localization. (en) 输入：zh

3.切换的环境The fallback locale of project localization 输入：en

4.打开项目，在src下新启租建lang目录

5.选择在src下的一个目录作为存放：The directory where store localization messages of project. It's stored under

src directory. (locales)

输入：lang

6.单引号设置：Enable locale messages in Single file components ? (y/N) 输入：y

7.查看目录lang，生成型旁茄了zh.json en.json

1.命令安装：npm i --save-dev postcss

2.命令安装：npm isntall postcss-import

3.命令安装：npm i postcss-px-to-viewport

4.命令安装：npm i postcss-aspect-ratio-mini

5.命令安装：卜察npm i postcss-cssnext

6.命令安装：npm i postcss-write-svg

7.命令安装：npm i postcss-viewport-units

8.命令安装：npm i cssnano-preset-advanced --save-dev

9.命令安装：npm install

10.打开项根目录下找到postcss.conf.js

改为：

11.npm run serve

项目打开成功如下图，样式单位由PX换位VM即为成功

使用方式：找到报错文件，右键Fix ESlint Problems即可，

注意：网上有两种方式：一种右键.eslintrc.js文件执行Fix ESlint 或者 Apply ESlint或者eslint --fix后再运行，报错会消失，但是错误并不会改正。

关于vuecli3和vuecli3打包配置的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。