共计 1986 个字符，预计需要花费 5 分钟才能阅读完成。
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'。记录下打包遇到的一些问题，可能会有些表白不准的，当前再补充批改。