乐乐今天给分享vue打包优化的知识，其中也会对vue打包优化插件进行解释，希望能解决你的问题，请看下面的文章阅读吧！

vue打包优化 vue打包优化插件vue打包优化 vue打包优化插件


vue打包优化 vue打包优化插件


1、此外，CSS的压缩和优化是提高网页性能的重要手段之一，但是可能会影响到样式的细节，因此在打包时需要权衡好性能和样式效果之间的关系，选择适合自己项目的打包方式。

2、当我们将 vue 项目完成后，面临的就是如何将项目进行打包上线，放到中。

3、我使用的是 vue-cli（） 脚手架，所以就讲一下如何将项目进行打包，并放到 tomcat 上。

4、 如果是 vue-cli (非 脚手架)，这篇文章可能有点帮助。

5、地址链接：vue-cli 如何打包上线local: 本地地址，即 localhost先来描述一下期间遇到的问题有哪些：1、打包后将 dist 文件夹和 index.html 放到 tomcat，在浏览器中访问时，出现空白页，f12 提示 404。

6、2、打包好的静态资源均是路径，无法引入进项目，也是 404。

7、1、项目目录结构 这是打包后的，所以有 dist 文件夹，打包方式：npm run build。

8、2、webpack.config.js 这里只是一小部分，因为这边最关键的就是 publicPath,下面会提，这边可以解决静态资源 404 无法引入的问题。

9、3、npm run build 打包后的文件。

10、npm run build 打包后生成一个 dist 文件夹，这里面的目录： 我对 webpack 打包工具的原理不是很清楚，所以文件夹应该生成什么不是了解。

11、我这边是这样子的。

12、主要是一个主要的 build.js, 因为我们的 index.html 引入的就是这个 js 文件。

13、还有一些文件和 ElementUI 生成的 ttf 和 woff。

14、4、如何放到中。

15、接下来就是需要将生成的 dist 文件夹和 index.html 文件放到中，只需要这两个。

16、首先我将这两个文件放在同一个文件夹中，我命名为 gas（随意）。

17、 然后将文件夹放到 tomcat 中，我将文件夹放到 tomcat 的 webapps 文件夹目录下：ok 部署完成,启动 tomcat，你会发现显示一个空白页，一些静态资源都是 404。

18、5、解决空白页和静态资源无法引入的问题。

19、1、首先空白页的问题，可以重 f12 中看出来都是路径的原因，而我们打包后，应该的引入路径是相对路径，这时我们需要的是修改 index.html 页面。

20、看一下没改之前的： 看我 /dist/build.js 引用的是路径，这就导致了在 tomcat 去访问 index.html 页面时，报404。

21、我们需要将路径变成相对路径 ./dist/build/。

22、多一个点，很关键。

23、好了到这里应该主页面可以显示了。

24、但是你会发现，我的静态资源，我的（不包括 img 形式的引入），例如我在 css 中 background:() 的显示404。

25、2、解决静态资源失效的问题这就需要修改我们的 webpack.config.js 中的 publicPath 了，默认的 vue-cli 脚手架环境搭建好后，publicPath 是这样的： 可以看到我们的路径是： /dist/。

26、所以这时候我们如果打开页面，静态资源的路径都会是这样子的，并且报错404：显然可以看出和我们想要的路径不一致，上面我贴出来的在 tomcat 的文件目录中我将 dist 和 index.html 都放进了一个 gas 的文件夹中。

本文到这结束，希望上面文章对大家有所帮助。