使用的是vue-element-admin做示例,可以参考Vue项目根据不同运行环境打包项目,其他项目应该大同小异。

使用vue-router的browserHistory模式,配置mode: 'history', 有更好的体验。

目的: 想将项目打包后发布到apache的www下的vue子目录

先讲结论:

  1. 需要修改router/index.jsnew Router 配置,加一个base: '/vue/', 它指定应用的基路径,该应用是服务于localhost/vue路径下,所以必须加base配置,否则应用会展示404页面
  2. 需要修改config/index.js中build下的assetsPublicPath: '/vue/',如果用相对路径,chunk文件会报错找不到。
  3. 修改httpd.conf文件,开启rewrite_module功能。

    • LoadModule rewrite_module libexec/apache2/mod_rewrite.so,去掉前面的#。
    • 然后找到 AllowOverride None的那行,把它改成AllowOverride All,来使.htaccess文件生效。
  4. 在apache 的www/vue 目录下新建.htaccess文件, 需要修改RewriteRule/vue/index.html, 否则刷新页面服务端会直接报404错误。

.htaccess文件内容


  1. <IfModule mod_rewrite.c>
  2. RewriteEngine On
  3. RewriteBase /
  4. RewriteRule ^index\.html$ - [L]
  5. RewriteCond %{REQUEST_FILENAME} !-f
  6. RewriteCond %{REQUEST_FILENAME} !-d
  7. RewriteRule . /vue/index.html [L]
  8. </IfModule>

放到www根目录,或更深的目录,只需要对应的修改即可。第一点比较重要,参考项目的文档上也没有说明,加上不够细致,对新手还是有门槛的。

希望这篇文档帮助更多人。。。

原文地址:https://segmentfault.com/a/1190000012548105

vue项目打包后想发布在apache www/vue 目录下的更多相关文章

  1. vue项目打包后运行报错400如何解决

    昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with ...

  2. vue项目打包后资源相对引用路径的和背景图片路径问题

    vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...

  3. Vue项目打包后背景图片路径错误

    vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...

  4. SpringBoot 项目打包后运行报 org.apache.ibatis.binding.BindingException

    今天把本地的一个SpringBoot项目打包扔到Linux服务器上,启动执行,接口一访问就报错,但是在本地Eclipse中启动执行不报错,错误如下: org.apache.ibatis.binding ...

  5. vue项目打包后一片空白及资源引入的路径报错解决办法

    网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通过手机打开一片空白.这个主要原因是路径的问题. 1.记得改一下config下面的index.js中bu ...

  6. vue项目打包后css背景图路径不对的问题

    问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...

  7. vue项目打包后路径出错

    安装完vue后搭建了一个项目,直接执行 npm run dev 是可以正常打开页面的: 但是执行 npm run build 打包项目后打开却报错了,如下: 原来是项目中的静态文件路径报错了... 然 ...

  8. vue-cli构建的vue项目打包后css引入的背景图路径不对的问题

    使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...

  9. vue项目打包后在IE浏览器报错,页面显示空白

    之前写一个项目,一直放在谷歌浏览器调试测试,到尾声时放到IE浏览器结果直接白屏,页面打不开 找了网上的方法,加了babel-polyfill插件后还是不行,后来排查发现是打包插件出了问题,因为用的项目 ...

随机推荐

  1. 获取浏览器端的cookie方法

    代码如下: function getCookie(key){ var cookies=document.cookie; if(cookies.length>0){ var start=cooki ...

  2. js单体内置对象

    js单体内置对象:js的内置对象,是ECMAScritp提供的.不依赖于宿主环境的对象,我的理解就是在我们开发之前js里面就已经存在的对象.单体内置对象就是是不需要通过new来实例化的,例如我们的st ...

  3. 从YV12到NV12

    Media SDK的decoder,vpp,encoder对输入输出格式有着严格的限制,现在仅仅支持NV12.那么如何从其他格式转化为NV12是日常工作中经常遇到的事情.本篇文章以此为目的,讨论如何将 ...

  4. [luogu] P4823 [TJOI2013]拯救小矮人(贪心)

    P4823 [TJOI2013]拯救小矮人 题目描述 一群小矮人掉进了一个很深的陷阱里,由于太矮爬不上来,于是他们决定搭一个人梯.即:一个小矮人站在另一小矮人的 肩膀上,知道最顶端的小矮人伸直胳膊可以 ...

  5. Shiro:授权的相关实现

    Shiro:授权的相关实现 一.使用Shiro过滤器实现授权 设置好授权拦截跳转的请求地址 /** * 创建ShiroFilterFactoryBean */ @Bean public ShiroFi ...

  6. jvm 堆、栈 、方法区概念和联系

    一.三者联系 1.堆:解决数据的存储问题( 即 数据怎么放,放到哪 ). 2.栈:解决程序运行的问题( 即 程序如何执行,或者说如何处理数据 ). 3.方法区:辅助堆栈的一块永久区,解决堆栈信息的产生 ...

  7. libvips

    libvips : an image processing library libvips is a 2D image processing library. Compared tosimilar l ...

  8. gdb学习-checkpoint,watch

    checkpoint的内容参考: http://blog.chinaunix.net/uid-23629988-id-2943273.html 这一篇主要是checkpoint,在next之前加che ...

  9. [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 ...

  10. magento megatron主题加入中文

    magento的megatron默认不支持中文,全部我们须要在它的本地化目录中加入中文的cvs文件,加入方法例如以下: 1.切换至 app ▸ design ▸ frontend ▸ megatron ...