Vue我的项目打包部署到xampp (Apache)

部署目录：D:xampp/htdocs/flowmesh，部署到根目录下的子目录。
参考：https://router.vuejs.org/zh/g...

如果部署到一个子目录，须要应用 Vue CLI 的 publicPath 选项和相干的 router base属性。还须要对后端配置，把根目录调整成为子目录 (例如用 RewriteBase /name-of-your-subfolder/ 替换掉 RewriteBase /)。

具体操作如下：

1、批改xampp的httpd.conf

开启rewrite_module性能：去掉LoadModule rewrite_module libexec/apache2/mod_rewrite.so后面的#。
将AllowOverride None改成AllowOverride All，使.htaccess文件失效。

<Directory /> AllowOverride none #Require all denied Options +ExecCGI Order allow,deny Allow from all</Directory>

改为：

<Directory /> #AllowOverride none AllowOverride All #Require all denied Options +ExecCGI Order allow,deny Allow from all</Directory>
2、新建.htaccess文件

在htdocs/flowmesh目录下新建.htaccess文件，否则刷新页面服务端会间接报404谬误。

.htaccess文件内容：

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

RewriteBase / 批改为 RewriteBase /flowmesh/
RewriteRule . /index.html [L] 批改为 RewriteRule . /flowmesh/index.html [L]

我的了解：地址栏输出http://localhost/flowmesh/，默认申请的是index.html页面，而vue路由默认是跳转到home页面。

地址栏变成http://localhost/flowmesh/home，申请的home.html页面（不存在）。然而vue是单页面，对所有页面的申请都应返回index.html。此句就是说，对所有页面的申请都返回/flowmesh/index.html。

创立.htaccess文件：
能够先创立一个文本文件，而后“另存为”时：

3、批改路由的base选项
const router = new VueRouter({  base: process.env.BASE_URL,  // 即vue.config.js的publicPath值  mode: 'history',  routes})

4、vue.config.js的publicPath选项
const TerserPlugin = require('terser-webpack-plugin')module.exports = {     publicPath: process.env.NODE_ENV === 'production' ? '/flowmesh' : '/',     productionSourceMap: false, // 打包后，就不能跟踪组件，查看组件源码了     configureWebpack: {         resolve: {           alias: {             'assets': '@/assets',             'common': '@/common',             'components': '@/components',             'network': '@/network',             'pages': '@/pages',             'mixins': '@/mixins'           }          },         optimization: {           minimizer: [             new TerserPlugin({               terserOptions: {                 compress: {                   drop_console: true  // 打包时将console语句去掉                 }               }             })           ]           }     }}

5. npm run build
process.env.NODE_ENV === 'production' ? '/flowmesh' : '/'build时，依据理论部署的目录，替换掉'/flowmesh'。

记录下打包遇到的一些问题，可能会有些表白不准的，当前再补充批改。