关于vue.js:Vue项目打包部署到xampp

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'。

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