使用的是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文件内容


<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 目录下的更多相关文章

  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. BZOJ 4229: 选择 LCT_独创方法_边双

    考虑如果两点在一个环中,那么这两点一定可以构出双联通分量. 考虑环和环镶嵌,那么两个环中的点一定都互为双联通分量. 由此,我们想到一个算法: 将删边转为反向加边,用LCT维护图. 当我们连接两个点时, ...

  2. Pyhton学习——Day5

    # s=set('hello')# print(s)## s=set(['alex','alex','sb'])# print(s) # s={1,2,3,4,5,6} #添加# s.add('s') ...

  3. webpack——bable-loader,core,preset,编译es6

    //文件夹,在命令行中npm init 之后可以一直回车,答y 出现文件 然后安装bable npm install -save-dev babel-loader babel-core 文件 然后我们 ...

  4. Day 03 知识点[python程序运行的方式、变量、注释、内存管理、数据类型]

    执行Python程序的两种方式 第一种:交互式,在cmd中运行 优点:调试程序方便,直接给出结果 缺点:无法保存,关掉cmd窗口数据就消失 第二种:命令行式通过cmd中输入Python3文本 优点:数 ...

  5. HTML中使用 js 添加 data-toggle

    情况:<li class="active"><a href="#server1" data-toggle="tab"> ...

  6. js(Mandango:壮汉专用,电影院划位工具)

    Mandango:壮汉专用,电影院划位工具 <body onload="initSeats();"> <div style="margin-top:75 ...

  7. PHP算法之四大基础算法

    前言 虽然工作中,你觉得自己并没有涉及到算法这方面的东西,但是算法是程序的核心,一个程序的好与差,关键是这个程序算法的优劣,所以对于冒泡排序.插入排序.选择排序.快速排序这四种基本算法,我想还是要掌握 ...

  8. 小学生都能学会的python(函数)

    小学生都能学会的python(函数) 神马是函数 函数: 对功能或者动作的封装 函数的定义 def 函数名(形参列表): 函数体(return) ret = 函数名(实参列表) 函数的返回值 retu ...

  9. 使用InstelliJ IDEA创建Spring MVC应用程序

    环境版本 Windows 8.1 IDE:InstelliJ IDEA 13    Spring:Spring 4.1.1 & Spring MVC 4.1.1    WebLogic 10. ...

  10. js实现鼠标吸附线条效果

    如图,箭头→为鼠标位置,鼠标会带有吸附着一些线条的效果,具体效果可在我的博客查看,当然,这也是可很受欢迎很常见的效果了=3= <script> !function(){ function ...