服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - vue.js - Vue项目打包部署到apache服务器的方法步骤

Vue项目打包部署到apache服务器的方法步骤

2022-01-12 17:05ykCoder vue.js

这篇文章主要介绍了Vue项目打包部署到apache服务器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器。

但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进行打包,打包后会在项目目录下生成一个dist文件夹,内容如下:

Vue项目打包部署到apache服务器的方法步骤

然后就是把这些文件丢到服务器上的某个文件夹下,我这里的文件夹名字是ibms

Vue项目打包部署到apache服务器的方法步骤

遇到的问题:

1. 直接去访问http://www.xxx.com/ibms/,会发现网页是白屏的,什么都没有,这就比较奇怪了,其实是因为资源加载的路径有问题!

解决方法:

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

assetsPublicPath: '/ibms/'

在router中的index.js配置中加上:

export default new Router({
mode: 'history',
scrollBehavior: () => ({ y: 0 }),
base: '/ibms/', // 加上这一行
routes: constantRouterMap
})

接下来再重新npm run build打包,然后丢到服务器上ibms文件夹下,这时页面就可以正常访问了。

2. 在当前页面刷新或者用url栏访问某个子页面,结果发现网页404了,这是因为vue路由的mode是history模式。

解决方法:

把所有的请求全部转发到http://www.xxx.com/ibms/index.html上就可以了

我这里用的是apache做的web服务器,在ibms目录下新建.htaccess文件(跟index.html同级),编辑代码。

Vue项目打包部署到apache服务器的方法步骤

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /ibms/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /ibms/index.html [L]
</IfModule>

这个配置的作用就是把所有服务器上不存在请求全部转发到index.html上去。(PS:记得要重启apache服务器哦)

到此这篇关于Vue项目打包部署到apache服务器的方法步骤的文章就介绍到这了,更多相关Vue项目打包部署到apache内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家!

原文链接:https://www.cnblogs.com/ykCoder/p/11022572.html

延伸 · 阅读

精彩推荐
  • vue.jsVue——解决报错 Computed property "****" was assigned to but it has no setter.

    Vue——解决报错 Computed property "****" was assigned to but it has no

    这篇文章主要介绍了Vue——解决报错 Computed property "****" was assigned to but it has no setter.的方法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...

    刘彤彤5842021-12-15
  • vue.jsiview实现动态表单和自定义验证时间段重叠

    iview实现动态表单和自定义验证时间段重叠

    这篇文章主要介绍了iview实现动态表单和自定义验证时间段重叠,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需...

    董志钦6312021-12-29
  • vue.jsvue实现购物车的小练习

    vue实现购物车的小练习

    这篇文章主要为大家详细介绍了vue实现购物车的小练习,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    tall羊8172021-12-16
  • vue.js详解template标签用法(含vue中的用法总结)

    详解template标签用法(含vue中的用法总结)

    这篇文章主要介绍了template标签用法(含vue中的用法总结),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧...

    fengyezi1595092021-12-30
  • vue.jsVue看了就会的8个小技巧

    Vue看了就会的8个小技巧

    这篇文章主要介绍了玩转Vue的8个小技巧,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...

    快快网络9022022-01-05
  • vue.jsVue 事件的$event参数=事件的值案例

    Vue 事件的$event参数=事件的值案例

    这篇文章主要介绍了Vue 事件的$event参数=事件的值案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...

    荣光无限4522022-01-11
  • vue.jsvue中配置scss全局变量的步骤

    vue中配置scss全局变量的步骤

    这篇文章主要介绍了vue中配置scss全局变量的步骤,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...

    吃火鸡的馒头4352021-12-21
  • vue.jsvue实现简易的双向数据绑定

    vue实现简易的双向数据绑定

    这篇文章主要介绍了vue如何实现简易的双向数据绑定,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...

    LastStarDust8772021-12-22