Vue项目打包部署到xampp

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

部署目录：D:xampp/htdocs/h5，部署到根目录下的子目录。
参考：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/h5目录下新建.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/h5/，默认请求的是index.html页面，而vue路由默认是跳转到home页面。

地址栏变成http://localhost/h5/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' ? '/h5' : '/',
     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' ? '/h5' : '/'
build时，根据实际部署的目录，替换掉'/h5'。

记录下打包遇到的一些问题，可能会有些表达不准的，以后再补充修改。

Vue项目打包部署到xampp