浅谈vue项目如何打包扔向服务器
72 浏览量
2020-12-11
21:46:08
上传
评论 1
收藏 553KB 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 文件夹，这里面的目录：
我对 webpack 打包工具的原理不是很清楚，所以文件夹应该生成什么不是了解。我这边是这样子的。主要是一个主要的
build.js, 因为我们的 index.html 引入的就是这个 js 文件。还有一些图片文件和 ElementUI 生成的 ttf 和 woff。
4、如何放到服务器中。、如何放到服务器中。
接下来就是需要将生成的 dist 文件夹和 index.html 文件放到服务器中，只需要这两个。首先我将这两个文件放在同一个文件
资源评论
