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插件后还是不行,后来排查发现是打包插件出了问题,因为用的项目 ...
随机推荐
- 获取浏览器端的cookie方法
代码如下: function getCookie(key){ var cookies=document.cookie; if(cookies.length>0){ var start=cooki ...
- js单体内置对象
js单体内置对象:js的内置对象,是ECMAScritp提供的.不依赖于宿主环境的对象,我的理解就是在我们开发之前js里面就已经存在的对象.单体内置对象就是是不需要通过new来实例化的,例如我们的st ...
- 从YV12到NV12
Media SDK的decoder,vpp,encoder对输入输出格式有着严格的限制,现在仅仅支持NV12.那么如何从其他格式转化为NV12是日常工作中经常遇到的事情.本篇文章以此为目的,讨论如何将 ...
- [luogu] P4823 [TJOI2013]拯救小矮人(贪心)
P4823 [TJOI2013]拯救小矮人 题目描述 一群小矮人掉进了一个很深的陷阱里,由于太矮爬不上来,于是他们决定搭一个人梯.即:一个小矮人站在另一小矮人的 肩膀上,知道最顶端的小矮人伸直胳膊可以 ...
- Shiro:授权的相关实现
Shiro:授权的相关实现 一.使用Shiro过滤器实现授权 设置好授权拦截跳转的请求地址 /** * 创建ShiroFilterFactoryBean */ @Bean public ShiroFi ...
- jvm 堆、栈 、方法区概念和联系
一.三者联系 1.堆:解决数据的存储问题( 即 数据怎么放,放到哪 ). 2.栈:解决程序运行的问题( 即 程序如何执行,或者说如何处理数据 ). 3.方法区:辅助堆栈的一块永久区,解决堆栈信息的产生 ...
- libvips
libvips : an image processing library libvips is a 2D image processing library. Compared tosimilar l ...
- gdb学习-checkpoint,watch
checkpoint的内容参考: http://blog.chinaunix.net/uid-23629988-id-2943273.html 这一篇主要是checkpoint,在next之前加che ...
- [Angular] Set Metadata in HTTP Headers with Angular HttpHeaders
Besides sending (or requesting) the actual data to the server API, there’s also often the need to se ...
- magento megatron主题加入中文
magento的megatron默认不支持中文,全部我们须要在它的本地化目录中加入中文的cvs文件,加入方法例如以下: 1.切换至 app ▸ design ▸ frontend ▸ megatron ...