分类：
版权声明：Dear_Mr原创文章。转载时必须附上原文链接并给出相关说明。
目录(?)[+]
vue项目webpack打包部署到服务器
这篇博文主要讲的是我今天遇到的问题，经过我的询问，很多人在打包部署的时候都遇到了一些问题。下面讲一下如何将Vue项目放到服务器上。这里以Tomcat为例。
必须配置的是/config/index.js
在vue-cli webpack模板下的/config/index.js中，我们可以看到assetsPublicPath键，而且这个东西出现了两次。我第一次打包的时候，只是修改了底部的assetsPublicPath，把"/" 改成了./，然后执行了npm run build，打包成功后，可以看到多了一个项目中的文件夹，即dist，其中包含static文件夹和index.html。然后我把dist目录下的文件复制到Tomcat服务器上，你会发现访问得到的是一个空白页面，但是当我放到.webappsROOT目录下时，就可以访问了
Tomcat下面的目录结构：
但这肯定是不可能的，所以我开始寻找答案并遵循其他人的一些步骤。后来发现还是有问题，无法访问主页。虽然，我从来没有成功过，但是我也没有放弃，然后我结合别人在问答中所说的，尝试了几次，终于成功了。 （给大家一个小建议：不要放弃）。
以下是我的config/index.js的配置：
//请参阅http://vuejs-templates.github.io/webpack 获取文档。varpath=require("path")
模块. 导出={
构建： {
env:require("./prod.env"),
index: path.resolve(__dirname,"./dist/index.html"),
assetsRoot: path.resolve(__dirname,"./dist"),
assetsSubDirectory:"静态",
assetPublicPath:"./",
productionSourceMap:true,//默认情况下Gzip 关闭，许多流行的静态主机如Surge 或Netlify 已经为您gzip 所有静态资源。 //在设置为`true` 之前，请确保： //npm install --save-dev 压缩-webpack-pluginproductGzip:false，
productionGzipExtensions: ["js","css"],//运行带有额外参数的构建命令//在构建完成后查看包分析器报告：//`npm run build --report`//设置为`true` 或`false` 始终打开或关闭bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env:require("./dev.env"),
端口：8080，
autoOpenBrowser:true,
assetsSubDirectory:"静态",
assetPublicPath:"./",
proxyTable: {},//CSS Sourcemaps 默认关闭，因为相对路径有“bug”//使用此选项，根据CSS-Loader README //(https://github.com/webpack/css-loader#sourcemaps)//在我们的根据经验，它们通常会按预期工作，//启用此选项时请注意此问题。cssSourceMap:false}
}
可以发现我改变了两处，即assetsPublicPath对应的值。我这里用了./。我也用webapps下的项目名进行了尝试，但没有得到我想要的结果。后来我还是改成./
使用vue-router的情况
当你在项目中使用vue-router时，需要在src/router/index.js中添加一些内容，如下：
导出默认新路由器({
模式："历史",
base:"/ttms/",//添加的地方.
关于Vue项目Webpack打包与服务器部署指南到此分享完毕，希望能帮助到您。
【Vue项目Webpack打包与服务器部署指南】相关文章：
2.米颠拜石
3.王羲之临池学书
8.郑板桥轶事十则
用户评论
看完这篇文章感觉我终于明白vue项目的打包原理了！
有10位网友表示赞同！
部署到服务器一直是让我头疼的问题，这篇正好解决我的困扰！
有13位网友表示赞同！
原来包处理代码这么简单啊，我要赶紧回去复习一下
有8位网友表示赞同！
分享一篇关于 vue 项目使用 nginx 部署的文章，希望可以帮到大家!
有14位网友表示赞同！
用 webpack 打包部署 vue 项目真是太方便了！以后我肯定要用这个
有12位网友表示赞同！
这篇文章讲解得很详细，每个步骤都说得非常清楚。
有15位网友表示赞同！
终于可以不用手动整理文件了！webpack 可以自动帮你打包所有东西！
有7位网友表示赞同！
服务器配置也是需要认真学习的。看作者写的部署流程就感觉很有经验！
有11位网友表示赞同！
要记录一下这篇文章，以后做项目用到就来翻阅。
有10位网友表示赞同！
之前听别人说 webpack 多么厉害，现在终于自己体验到了！
有19位网友表示赞同！
文章配图也做的很棒，看着就明白。真希望能多写一些这样操作指南的文章!
有20位网友表示赞同！
打包部署的过程感觉很多细节需要注意啊，还是要多练习几次才行！
有12位网友表示赞同！
感谢作者分享这篇文章，让我解决了很大一个难题！
有18位网友表示赞同！
看来我还是需要再学习一下 webpack 的用法了！
有13位网友表示赞同！
vue 项目打包部署到服务器真是太重要了，以后一定好好积累经验!
有16位网友表示赞同！
希望能多关注前端开发的工具和技术，这篇文章让我了解了一个新领域。
有15位网友表示赞同！
真希望作者能够分享更多关于 vue 项目的实战经验！
有5位网友表示赞同！
最近在学习 vue，看到这篇文章感觉很有用。
有9位网友表示赞同！
部署到服务器太难了！希望以后能像作者一样轻松完成!
有10位网友表示赞同！