今天,偶然想将写的代码部署到本地。但是碰到了一系列问题，index.html 打开一片空白，资源未加载进来。初步怀疑是打包时的基础路径有问题，因为我并没有在vue.config.js配置publicPath。所以，首先到vue cli官方文档上查阅了一下publicPath。其定义为 “默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 <a href="https://www.my-app.com/" class="external-link" rel="nofollow" target="_blank">https://www.my-app.com/</a>。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 <a href="https://www.my-app.com/my-app/" class="external-link" rel="nofollow" target="_blank">https://www.my-app.com/my-app/</a>，则设置 publicPath 为 /my-app/。”
因为我在本地需要部署在http://localhost/xxx/，所以将设置publicPath为 '/xxx'。但因为这个值对开发环境同样有效，所以这里需要按照当前环境来区分路径。
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/xxx'
: '/'
}设置好之后，再次进行打包构建。替换到apache对应目录下之后，发现所有资源都能够正常加载了。但页面依旧没有进入到正常页面。
初步怀疑可能是使用了WebHistory模式并且应用还在子文件夹部署，所以导致的此情况。查阅vue router官方文档，直奔服务器配置示例，看到需要在vue cli配置publicPath和vue router的base选项，并且需要配置Apache的一些选项才能够正常部署。
在上一步操作中，我已经更改好了publicPath选项。所以我目前需要配置vue router的base选项，直接按照官方提供的链接。看到base是参数传递的，所以将base传入进去。
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
});并且配置Apache。
1、首先需要配置Apache httpd.conf
开启rewrite_module功能， LoadModule rewrite_module libexec/apache2/mod_rewrite.so 去掉注释
AllowOverride: All是为了使apache支持 .hatccess,
httpd.conf
DocumentRoot "D:/xampp/htdocs" (设置apache默认指向目录)
<Directory "D:/xampp/htdocs">
Options Indexes FollowSymLinks Multiviews
MultiviewsMatch Any
AllowOverride All
Require all granted
</Directory>.hatccess
<IfModule mod_rewrite.c>
RewriteEngine On
# 由于部署在子文件夹下 所以需要将base改为对应子文件夹的目录
RewriteBase /xxxx/ # 默认在哪个目录查找
RewriteRule ^index\.html$ - [L] # 匹配 index.html 文件
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
#这里也需要改为子文件夹下的index
RewriteRule . /xxxx/index.html [L]
</IfModule>将.hatccess放置到指定文件夹的根目录下 再次打包部署后发现页面显示正常了。
参考文献：
https://www.smme.cc/2018/08/04/vue-history-mode.html
https://next.router.vuejs.org/guide/essentials/history-mode.html#nginx
