vue项目webpack打包部署到服务器

小编推荐:Fundebug提供JS错误监控、微信小程序错误监控、微信小游戏错误监控,Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务,众多大佬公司都在使用。

最近开发的项目遇到,记录下啦。

1.修改config文件夹下的index.js文件

vue项目webpack打包部署到服务器_第1张图片

 


2.修改build 文件夹下的 webpack.prod.conf.js 文件

vue项目webpack打包部署到服务器_第2张图片

 


添加红框部分

vue项目webpack打包部署到服务器_第3张图片

 


3.修改build 文件夹下的 utils.js 文件

vue项目webpack打包部署到服务器_第4张图片

 


↑ 上面的可以解决静态文件404bug

 


↓ 下面可以解决部署到服务器上访问空白的bug

4.修改路由
修改这个可以解决部署到服务器上后打开页面空白的bug,我就是被这个搞了我一早上,打包的时候一定要将mode 改为 hash 模式

vue项目webpack打包部署到服务器_第5张图片

 


5.npm run build
会生成一个dist文件夹,里面有个static文件夹和index.html文件

vue项目webpack打包部署到服务器_第6张图片

 

 


然后呢就是交给后台大佬部署到服务器啦。
再然后就可以在公网上访问啦。

 



作者:Relo
链接:https://www.jianshu.com/p/8733df17a9b0

你可能感兴趣的:(vue.js)