vue项目打包丢入服务器,浅谈Vue项目如何打包扔向服务器_七喜_前端开发者

当我们将

如果是

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

1、打包后将 dist 文件夹和 index.

1、项目目录结构

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

2、webpack.config.

这里只是一小部分，因为这边最关键的就是 publicPath,下面会提，这边可以解决静态

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

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

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

4、如何放到服务器中。

接下来就是需要将生成的 dist 文件夹和 index.

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

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

5、解决空白页和静态

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

看一下没改之前的：

看我 /dist/build.

但是你会发现，我的静态

2、解决静态

这就需要修改我们的 webpack.config.

可以看到我们的路径是： /dist/。所以这时候我们如果打开页面，静态http://10.0.0.181:8088/dist/bg.png?fe9b889cea51978538ce352593be0573

显然可以看出和我们想要的路径不一致，上面我贴出来的在 tomcat 的文件目录中我将 dist 和 index.http://10.0.0.181:8088/gas/dist/bg.png?fe9b889cea51978538ce352593be0573

看出区别了吗！

解决：

所以我需要改变一下 webpack.config.

ok,到现在为止，最主要的两个问题解决了，一个是 index.

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

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

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

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

7、待解决的问题：

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

2、在我的 index.html 中如果引入 link

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

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

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

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

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