vue项目打包后想发布在apache www/vue 目录下
使用的是vue-element-admin做示例,可以参考Vue项目根据不同运行环境打包项目,其他项目应该大同小异。
使用vue-router
的browserHistory模式,配置mode: 'history'
, 有更好的体验。
目的: 想将项目打包后发布到apache的www下的vue子目录
先讲结论:
- 需要修改
router/index.js
中new Router
配置,加一个base: '/vue/'
, 它指定应用的基路径,该应用是服务于localhost/vue
路径下,所以必须加base
配置,否则应用会展示404页面 - 需要修改
config/index.js
中build下的assetsPublicPath: '/vue/'
,如果用相对路径,chunk文件会报错找不到。 修改
httpd.conf
文件,开启rewrite_module功能。LoadModule rewrite_module libexec/apache2/mod_rewrite.so
,去掉前面的#。- 然后找到
AllowOverride None
的那行,把它改成AllowOverride All
,来使.htaccess
文件生效。
- 在apache 的
www/vue
目录下新建.htaccess
文件, 需要修改RewriteRule
为/vue/index.html
, 否则刷新页面服务端会直接报404错误。
.htaccess文件内容
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /vue/index.html [L]
</IfModule>
放到www根目录,或更深的目录,只需要对应的修改即可。第一点比较重要,参考项目的文档上也没有说明,加上不够细致,对新手还是有门槛的。
希望这篇文档帮助更多人。。。
原文地址:https://segmentfault.com/a/1190000012548105
vue项目打包后想发布在apache www/vue 目录下的更多相关文章
- vue项目打包后运行报错400如何解决
昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with ...
- vue项目打包后资源相对引用路径的和背景图片路径问题
vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...
- Vue项目打包后背景图片路径错误
vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...
- SpringBoot 项目打包后运行报 org.apache.ibatis.binding.BindingException
今天把本地的一个SpringBoot项目打包扔到Linux服务器上,启动执行,接口一访问就报错,但是在本地Eclipse中启动执行不报错,错误如下: org.apache.ibatis.binding ...
- vue项目打包后一片空白及资源引入的路径报错解决办法
网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通过手机打开一片空白.这个主要原因是路径的问题. 1.记得改一下config下面的index.js中bu ...
- vue项目打包后css背景图路径不对的问题
问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...
- vue项目打包后路径出错
安装完vue后搭建了一个项目,直接执行 npm run dev 是可以正常打开页面的: 但是执行 npm run build 打包项目后打开却报错了,如下: 原来是项目中的静态文件路径报错了... 然 ...
- vue-cli构建的vue项目打包后css引入的背景图路径不对的问题
使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...
- vue项目打包后在IE浏览器报错,页面显示空白
之前写一个项目,一直放在谷歌浏览器调试测试,到尾声时放到IE浏览器结果直接白屏,页面打不开 找了网上的方法,加了babel-polyfill插件后还是不行,后来排查发现是打包插件出了问题,因为用的项目 ...
随机推荐
- BZOJ 4229: 选择 LCT_独创方法_边双
考虑如果两点在一个环中,那么这两点一定可以构出双联通分量. 考虑环和环镶嵌,那么两个环中的点一定都互为双联通分量. 由此,我们想到一个算法: 将删边转为反向加边,用LCT维护图. 当我们连接两个点时, ...
- Pyhton学习——Day5
# s=set('hello')# print(s)## s=set(['alex','alex','sb'])# print(s) # s={1,2,3,4,5,6} #添加# s.add('s') ...
- webpack——bable-loader,core,preset,编译es6
//文件夹,在命令行中npm init 之后可以一直回车,答y 出现文件 然后安装bable npm install -save-dev babel-loader babel-core 文件 然后我们 ...
- Day 03 知识点[python程序运行的方式、变量、注释、内存管理、数据类型]
执行Python程序的两种方式 第一种:交互式,在cmd中运行 优点:调试程序方便,直接给出结果 缺点:无法保存,关掉cmd窗口数据就消失 第二种:命令行式通过cmd中输入Python3文本 优点:数 ...
- HTML中使用 js 添加 data-toggle
情况:<li class="active"><a href="#server1" data-toggle="tab"> ...
- js(Mandango:壮汉专用,电影院划位工具)
Mandango:壮汉专用,电影院划位工具 <body onload="initSeats();"> <div style="margin-top:75 ...
- PHP算法之四大基础算法
前言 虽然工作中,你觉得自己并没有涉及到算法这方面的东西,但是算法是程序的核心,一个程序的好与差,关键是这个程序算法的优劣,所以对于冒泡排序.插入排序.选择排序.快速排序这四种基本算法,我想还是要掌握 ...
- 小学生都能学会的python(函数)
小学生都能学会的python(函数) 神马是函数 函数: 对功能或者动作的封装 函数的定义 def 函数名(形参列表): 函数体(return) ret = 函数名(实参列表) 函数的返回值 retu ...
- 使用InstelliJ IDEA创建Spring MVC应用程序
环境版本 Windows 8.1 IDE:InstelliJ IDEA 13 Spring:Spring 4.1.1 & Spring MVC 4.1.1 WebLogic 10. ...
- js实现鼠标吸附线条效果
如图,箭头→为鼠标位置,鼠标会带有吸附着一些线条的效果,具体效果可在我的博客查看,当然,这也是可很受欢迎很常见的效果了=3= <script> !function(){ function ...