vue打包发布到服务器,vue项目如何打包部署

　　本文主要介绍Vue项目到apache服务器的打包和部署。通过示例代码进行了非常详细的介绍，对于大家的学习或者工作都有一定的参考价值。有需要的朋友下面和边肖一起学习。

　　在开发环境下，VU项目通过npm run dev命令运行，原理是在本地设置一个express服务器。

　　但是在服务器上却不是这样。整个项目必须由npm运行构建命令打包。打包后，将在项目目录中生成一个dist文件夹，包含以下内容：

　　然后把这些文件扔到服务器上的一个文件夹里。这里我的文件夹名是ibms。

遇到的问题：

　　1.当你直接访问http://www.xxx.com/ibms/的时候，你会发现网页是空白的，什么都没有，这很奇怪。其实是资源加载的路径有问题！

　　解决方法：

　　在config:的index.js中修改build下的webpack配置：

　　assets public path:“/ibms/”

　　将以下内容添加到路由器的index.js配置中：

　　导出默认新路由器({

　　模式：“历史”，

　　scrollBehavior: ()=({ y: 0 })，

　　base:“/ibms/”，//添加这一行

　　路线：constantRouterMap

　　})

　　接下来，重新打包npm run build，并将其放入服务器上的ibms文件夹中。此时可以正常访问页面。

　　2.刷新当前页面或访问带有url栏的子页面，结果是找到网页404。这是因为vue路由的模式是历史模式。

　　解决方法：

　　把所有的请求都转给http://www.xxx.com/ibms/index.html.

　　我这里用的是apache做的网络服务器。我将创建一个新的。htaccess文件(与index.html的级别相同)并编辑代码。

　　IfModule mod_rewrite.c

　　重写引擎开启

　　重写库/ibms/

　　重写者^index\.html$ - [L]

　　第二次重写% {请求文件名}！-f

　　第二次重写% {请求文件名}！-d

　　重写者。/ibms/index.html [L]

　　/IfModule

　　此配置的功能是将所有服务器上不存在的请求转发到index.html。(PS:记得重启apache服务器)

　　关于将Vue项目打包并部署到apache server的方法和步骤，本文到此结束。有关打包Vue项目并将其部署到apache的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。