Vue项目打包，部署到apache服务器

初学veu，实战项目上线服务器，查遍全网和问遍身边大佬，终于经过我不断地探索，上线成功啦，现在我就为大家梳理一下思路。
首先，我们先看一下官网
链接: Vue CLI部署.， 参数配置：publicPath. ， Vue Router：HTML5 History 模式

1、步骤
1、项目配置
2、打包项目，命令：npm run build
3、将生成的dist文件内容拖至服务器默认项目地址（Web root default location：/data/www/default）
4、后端配置

2、具体操作
1.项目配置
在config中的index.js里build下修改webpack配置：

assetsPublicPath: ‘/dist/’
注释：此位置为服务器访问下的地址“域名+端口号+地址名称”

 

在router中的index.js配置中加上：

export default new Router({
mode: ‘history’,
base: ‘/dist/’, // 加上这一行
routes: constantRouterMap
})

 

 2、打包

   npm run build 

 打包成功如下图

 生成dist文件夹，生成内容如下

 3、将生成的dist文件内容拖至服务器默认项目地址（Web root default location：/data/www/default）

 4、配置apache服务器，
到linux下apache安装路径/usr/local/apache/conf下,找到 httpd.conf，（apahce的配置文件）查看文件并编辑

  vi httpd.conf

将 AllowOverride None改为 AllowOverride All

AllowOverride All

设置AllowOverride All是为了使apache支持.hatccess文件。

在该项目根目录添加.hatccess文件（index.html平级），内容跟https://router.vuejs.org/zh-cn/essentials/history-mode.html‘>HTML5 History 模式(vue-router文档举例)类似，

  <IfModule mod_rewrite.c>
      RewriteEngine On
      RewriteBase /dist/
      RewriteRule ^index\.html$ - [L]
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteRule . /dist/index.html [L]
  </IfModule>

需要修改的两个地方，

RewriteBase /dist/； 
RewriteRule . /dist/index.html [L]，要添加项目所在文件的文件名，

最后一步apache重启