DDR爱好者之家

浅谈vue项目如何打包扔向服务器
站长资源 2024/11/26 佚名
60 1538
DDR爱好者之家 Design By 杰米

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

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

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

1、打包后将 dist 文件夹和 index.html 放到 tomcat，在浏览器中访问时，出现空白页，f12 提示 404。
2、打包好的静态资源均是绝对路径，无法引入进项目，也是 404。

1、项目目录结构

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

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

2、webpack.config.js

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

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

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

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

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

我对 webpack 打包工具的原理不是很清楚，所以文件夹应该生成什么不是了解。我这边是这样子的。主要是一个主要的 build.js, 因为我们的 index.html 引入的就是这个 js 文件。还有一些图片文件和 ElementUI 生成的 ttf 和 woff。

4、如何放到服务器中。

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

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

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

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

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

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

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

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

看一下没改之前的：

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

看我 /dist/build.js 引用的是绝对路径，这就导致了在 tomcat 去访问 index.html 页面时，报404。我们需要将路径变成相对路径 ./dist/build/。多一个点，很关键。好了到这里应该主页面可以显示了。

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

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

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

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

可以看到我们的路径是： /dist/。所以这时候我们如果打开页面，静态资源的路径都会是这样子的，并且报错404：http://10.0.0.181:8088/dist/bg.png"text-align: center">浅谈vue项目如何打包扔向服务器

代码中的 icon.ico 就是我手动将 icon 图标放到 dist 文件夹中，然后按照对应的引用路径进行引用。其他的 css 和 js 引用一样。

7、待解决的问题：

1、在我的项目中，使用了 ElementUI 框架，但是在打包放到服务器中后，发现按钮样式变了，所有的 padding 失效，所有我只能自己手动进行添加样式。

2、在我的 index.html 中如果引入 link css文件时，还是没办法引入相对路径，所以我将 css 样式都放到了各自的组件中的 style 中了，其他的一般都是用 npm 注入依赖的形式进行安装。

8、网上搜索到的相关问题和解决方法。

1、求助！Vue项目用Webpack打包后放到服务器上，但访问是空白页？弄了好久了也不知道什么原因

2、vue项目中，npm run build生成的index.html文件只有放在根目录下打开才能生效，怎么解决？

3、Vue应用部署到服务器的正确方式

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米