vue项目打包后想发布在apache www/vue 目录下

curlyCheng 发布于2019-08-21 18:19 / 3301人阅读

摘要：使用的是做示例，其他项目应该大同小异。然后找到的那行，把它改成，来使文件生效。在的目录下新建文件需要修改为否则刷新页面服务端会直接报错误。第一点比较重要，参考项目的文档上也没有说明，加上不够细致，对新手还是有门槛的。

使用的是vue-element-admin 做示例，其他项目应该大同小异。

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


  RewriteEngine On
  RewriteBase /
  RewriteRule ^index.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /vue/index.html [L]

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

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

私有云云服务器 maven项目打包发布到阿里云服务器阿里云服务器apache安装目录在哪里如何在linux下搭建apache服务器在阿里云服务器下设置apache和iis共用80端口详细步骤

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90347.html

服务器发布Vue/Nuxt项目指南(多图)

摘要：今天突然翻到之前写的这篇文章，修改完善了之后分享给大家一些常见的的服务器部署项目的方式。服务器是世界使用排名第一的服务器软件使用非常广泛。配置首先找到服务器目录中文件，找到，修改成你想要的配置。至于怎么安装服务器，大家自行解决吧很多前端朋友可能不是那么了解服务器配置。今天突然翻到之前写的这篇文章，修改完善了之后分享给大家一些常见的的Web服务器部署项目的方式。写在前面下面讲的每一...

PrototypeZ 2019-08-08 14:14 评论0 收藏0
Vue项目的部署简述

摘要：但是有些工程师学过一些自以为很高深，把项目部署在静态服务文件夹下然后启动服务器以带动项目。现在vue-cli已经是前端工程师必会的框架了（没有之一），很多前端工程师只会Vue项目的开发，并不会部署，因为大部分公司项目的部署工作是交给自己的上级或者项目管理者的，关于部署的相关知识可能大家都不甚了解，今天就给大家深入讲解一下我对Vue项目部署的心得和体会！ 1.Vue项目打包 vue项目...

Lionad-Morotar 2019-08-05 17:46 评论0 收藏0
Vue项目的部署简述

摘要：但是有些工程师学过一些自以为很高深，把项目部署在静态服务文件夹下然后启动服务器以带动项目。现在vue-cli已经是前端工程师必会的框架了（没有之一），很多前端工程师只会Vue项目的开发，并不会部署，因为大部分公司项目的部署工作是交给自己的上级或者项目管理者的，关于部署的相关知识可能大家都不甚了解，今天就给大家深入讲解一下我对Vue项目部署的心得和体会！ 1.Vue项目打包 vue项目...

stefanieliang 2019-08-26 10:32 评论0 收藏0
Vue组件库开发总结

摘要：组件库开发总结由于工作需要，最近在学习怎么开发一个组件库。按需打包的使用要使用按需打包，不仅组件库的打包需要做处理，项目中也需要做处理。 Vue组件库开发总结由于工作需要，最近在学习怎么开发一个Vue组件库。主要需要实现以下点：1.组件使用npm包引入2.实现按需引入及按需打包项目中许多实现是参考的element-ui，特别是webpack打包部分组织项目项目生成项目生成是直接...

longshengwang 2019-08-23 18:16 评论0 收藏0
Vue-项目从本地搭建到线上部署（wǒ shì biaō tí dǎng）

摘要：放置在目录下或通过绝对路径被引用。对于相关来说，我们推荐使用而不是直接链式指定。在不更改配置文件的情况下，前端页面迭代发布，不需要重启服务。作者：gauseen 0. 关于 Vuejs 简介：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，易用、灵活、高效。生态系统项目介绍 awesome-vue Vue.js 相关很棒的...

Arno 2019-08-26 13:49 评论0 收藏0