vue项目打包丢入服务器,浅谈vue项目如何打包扔向服务器.pdf

浅浅谈谈vue项项目目如如何何打打包包扔扔向向服服务务器器

当我们将 vue 项目完成后，面临的就是如何将项目进行打包上线，放 服务器中。我使用的是 vue-cli (simple) 脚手架，所以

就讲一下如何将项目进行打包，并放 tomcat 上。

如果是 vue-cli (非 simple 脚手架)，这篇文章可能有点帮助。地址链接：vue-cli 如何打包上线

先来描述一下期间遇 的问题有哪些：

1、打包后将 dist 文件夹和 index .html 放 tomcat，在浏览器中访问时，出现空白页，f12 提示 404 。

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

1、、项项目目目目录录结结构构

这是打包后的，所以有 dist 文件夹，打包方式：npm run build 。

2、、webpack.config.js

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

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

npm run build 打包后生成一个 dist 文件夹，这里面的目录：

我对 webpac 打包工具的原理不是很清楚，所以文件夹应该生成什么不是了解。我这边是这样子的。主要是一个主要的 build.j s

, 因为我们的 index .html 引入的就是这个 j s 文件。还有一些图片文件和 ElementUI 生成的 ttf 和 woff 。

4、、如如何何放放 服服务务器器中中。。

接下来就是需要将生成的 dist 文件夹和 index .html 文件放 服务器中，只需要这两个。首先我将这两个文件放在同一个文件夹

中，我命名为 gas (随意)。

然后将文件夹放 tomcat 中，我将文件夹放 tomcat 的 webapps 文件夹目录下：

o 部署完成,启动 tomcat，你会发现显示一个空白页，一些静态资源都是 404 。

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

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

的是修改 index .html 页面。

看一下没改之前的：

看我 /dist/build.j s 引用的是绝对路径，这就导致了在 tomcat 去访问 index .html 页面时，报404 。我们需要将路径变成相对路径

./dist/build/ 。多一个点，很关键。好了 这里应该主页面可以显示了。

但是你会发现，我的静态资源，我的图片 (不包括 img 形式的引入)，例如我在 css 中 bac ground :url() 的图片显示404 。

2、解决静态资源失效的问题

这就需要修改我们的 webpac .config.j s 中的 publicPath 了，默认的 vue-cli 脚手架环境搭建好后，publicPath 是这样的：

可以看 我们的路径是： /dist/ 。所以这时候我们如果打开页面，静态资源的路径都会是这样子的，并且报错404 ： http://10

.0.0.181:8088/dist/bg.png?fe9b889cee352593be0573

显然可以看出和我们想要的路径不一致，上面我贴出来的在 tomcat 的文件目录中我将 dist 和 index .html 都放进了一个 gas 的

文件夹中。所以正确的路径应该是这样的：

81:8088/gas/dist/bg.png?fe9b889cee352593be0573

看出区别了吗！

解解决决：：

所以我需要改变一下 webpac .config.j s 中的输出路径 publicPath: /gas/dist/ 。将最外层的文件夹路径加进去，这样就可以将静

态资源引入进项目了。

o , 现在为止，最主要的两个问题解决了，一个是 index .html 空白页，另一个是 静态资源路径不正确的问题。

6、、index .html 页页面面中中的的link 和和 srcipt 引引用用的的资资源源失失效效问问题题：：

原因还是路径的地址不对：

妥协的解决方法是：将自己引用的资源手动放 打包出来的 dist 文件夹内，然后在 index .html 中按照 dist 的相对路径进行引用

。

代码中的 icon.ico 就是我手动将 icon 图标放 dist 文件夹中，然后按照对应的引用路径进