Vue2在Windows虚拟机-Apache服务下部署步骤（2022）

如果安装初始化步骤采用前文所述的方式，那么部署步骤可以完全按照这个步骤来做。

如果不是的话，也可以借鉴这里的思路来实现。

当前部署的核心思想如下几点：

1.不在当前Apache服务下另设端口，或网站指定别的域名；

2.因为存在旧的项目，不将网站入口设为该项目的index.html，而采用修改.htaccess的方式。

1.核查路由与vue.config.js

核查router/index.js路由是否是如下配置：

const router = new VueRouter({
  mode: 'history',
  base: '/web',
  routes
})

注：

base: '/web'这个设置是后续部署方法的核心，这里意思是所有路由默认在自定义路由路径前加一个web/。

以上web可以其名为任意名称，可以理解为当前项目的默认前缀。

下vue.config.js的配置同理。

核查vue.config.js查看是否是如下配置：

module.exports = {
  publicPath: '/web/',
}

2.代码打包

在开发完成后，在cmd项目下运行：

npm run build

问题1：regeneratorRuntime is not defined

解决如下：

npm i @babel/plugin-transform-runtime

之后在plugins中增加一行'@babel/plugin-transform-runtime'

3.虚拟机网站设置确认

以PHPStudy部署为例，在虚拟机上部署Apache服务，在网站中核查，当前Apache服务端口是否自动指向www目录下的index.html。

 如上图所示，点击确认，如果不点击，也可以，这里主要是确认一下。

4.修改Apache重写模块

在Apache文件夹中找到conf/https.conf，在其中搜索并开启模块：

rewrite_module

同时搜索：

AllowOverride

并将其设置为All，结果如下：

<Directory />
    Options +Indexes +FollowSymLinks +ExecCGI
    AllowOverride All
    Order allow,deny
    Allow from all
    Require all granted
</Directory>

修改完成后，重启Apache服务。

5.重写.htaccess文件

<IfModule mod_rewrite.c>
  Options +FollowSymlinks -Multiviews
  RewriteEngine On

  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-f 
  RewriteRule ^web/.*$ web/index.html [L]
</IfModule>

 注：

以上是如果路径为web/开头，那么自动导向到www/web/index.html中。

如果不是以web/开头的，那么自动搜索该路由有文件则显示，没文件则不显示。

 重写语法支持指定多个指向规则，有点像定义路由。定义两个指向的写法如下，可以自行查询学习一下相关语法，加深理解。

<IfModule mod_rewrite.c>
  Options +FollowSymlinks -Multiviews
  RewriteEngine On

  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-f 
  RewriteRule ^web/.*$ web/index.html [L]
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule ^(.*)$ index.php [L,E=PATH_INFO:$1]
</IfModule>

6.程序部署访问

打包完成，并且重写模块定义完成后，将dist中的所有文件复制到www下的web（这里如果起了别的名字，就用你就自己起的名字）文件夹下，在线上部署访问。