五.项目的挂载服务器apache

Posted on

1. 打包运行

1
2
3
4
5
6
7
8
9
npm run build 
//注意在 mui, mui.css 中将所有的  svg  注释掉 , 否则就不会执行的
//需要注意的是我在
//E:\code\11.01\vueapp\node_modules\@intervolga\optimize-cssnano-plugin\index.js
//vueapp\node_modules\@intervolga\optimize-cssnano-plugin\index.js
//注释了105行到107行的代码
  hasErrors = true;
  throw new Error('CSS minification error: ' + err.message +
  '. File: ' + assetName);

2. 打包后在dist中遇到跨域的问题

一开始的跨域是用file的请求发送的

3. Apache 服务器的搭建

3.1 Apache的基础安装

  1. 解压 建议把解压后的文件拷贝到不带中文的路径下

    httpd-2.4.35-win32-VC14.zip

  2. 打开解压后的Apache24目录，找到bin，打开cmd，输入httpd -t 命令，查看错误，如果是在win10 的环境下

    直接使用不可以话，在命令行前面加上 ./

  3. 修改conf下httpd.conf配置文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    在 Apache24 中 conf 文件夹中改变 httpd.conf

    37 Define SRVROOT "D:/1-igeek 前端/tool/工具/Apache24"
    38 ServerRoot "D:/1-igeek 前端/tool/工具/Apache24"

    59 #Listen 12.34.56.78:80
    60 Listen 8888

    225 #
    226 ServerName localhost:8888

    234 <Directory />
        AllowOverride none
        #Require all denied
        Options FollowSymLinks
        AllowOverride None
        Order deny,allow
        Allow from all
    241 </Directory>

    255 DocumentRoot "E:/1-vueapp"
    256 <Directory "E:/1-vueapp">

  4. 在E:/webapps(存放dist文件的文件夹)中准备一个index.html文件

  5. ​ 输入对应的命令来注册apache服务

    # 安装 Apache 服务，‐n 参数是指定服务名称

    $ httpd.exe -k install -n “Apache”

    # 如果需要卸载 Apache，可以执行以下命令

    $ httpd.exe -k uninstall -n “Apache”

    \2. 启动apache服务器

    $ httpd.exe -k start -n “Apache”

    # 重新启动 Apache 服务

    $ httpd.exe -k restart -n “Apache”

    # 停止 Apache 服务

    $ httpd.exe -k stop -n “Apache”

  6. 在浏览器中输入localhost:8888查看是否有网页显示

3.2 配置Apache虚拟主机

1、修改httpd.conf配置文件

1
2
# Virtual hosts   //508
Include conf/extra/httpd-vhosts.conf  //509

2.修改 vhost.conf 文件 （在conf—>extra—>httpd-vhosts文件中）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<VirtualHost *:8888> 
    DocumentRoot "E:/webapps1"
    ServerName localhost
	<Directory "E:/webapps1">
		Options FollowSymLinks Indexes 
		AllowOverride none
		Require all granted
	</Directory> 
</VirtualHost>
解决项目发布之后的跨域问题
配置反向代理：
1、httpd.conf配置文件
 
2、httpd-vhosts.conf配置
<VirtualHost *:8888>
    #绑定域名
    ServerName localhost
    #默认首页
    DirectoryIndex index.html index.php
    #指定网站根目录
    DocumentRoot "E:/webapps1"
    #指定目录分配权限
    <Directory "E:/webapps1">
        #没有首页就显示列表（开发阶段可以这样）取值：all none Index
        Options Indexes
        #规定Deny,Allow的执行顺序, Order Deny,Allow ： 先执行Deny，再执行Allow
        Order Deny,Allow
        #全部禁止访问 取值：all none 指定ip
        Allow from All
        #但是，允许自己访问  取值：all none 指定ip
        Allow from all
    </Directory>
	Proxyrequests off
	<Proxy *>
		#规定Deny,Allow的执行顺序, Order Deny,Allow ： 先执行Deny，再执行Allow
        Order Deny,Allow
        #全部禁止访问 取值：all none 指定ip
        Allow from All
	</Proxy>
        #配置反向代理
		ProxyPass /api http://192.168.23.200:8899/api
</VirtualHost>
//3、打开浏览器就可以访问网站了

3.3 开启apache服务器的gzip压缩：

1.打开 httpd.conf配置文件中下面两个模块的注释

#LoadModule deflate_module modules/mod_deflate.so

#LoadModule headers_module modules/mod_headers.so

2.在httpd.conf配置文件最下面添加

​ SetOutputFilter DEFLATE

​ DeflateCompressionLevel 9

4. 需要注意的一些代理的问题

1
2
3
在 main.js 中如下：
//打包成apk的时候需要打开的
axios.defaults.baseURL = "http://47.103.222.56:8899";
4.1 需要在 vue.config.js 中配置代理
1
2
3
4
5
6
7
8
9
10
proxy: {
           //凡是请求以api开头的都会使用下面的代理服务器
           '/api/*': {
               // target: 'http://bc421114.ngrok.io/',
               target: 'http://47.103.222.56/', // 目标服务器地址
               secure: false,                    // 目标服务器地址是否是安全协议
               changeOrigin: true,               // 是否修改来源, 为true时会让目标服务器以为是webpack-dev-server发出的请求!服务端和服务端的请求是没有跨域的
               //pathRewrite: {'^/api': '/a'}     // 将/api开头的请求地址, /api 改为 /, 即 /api/xx 改为 /xx
           }
       }
4.2 在Apache中配置方向代理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<VirtualHost *:8888> 
    DocumentRoot "E:/1-vueapp"
    ServerName localhost
	<Directory "E:/1-vueapp">
		Options FollowSymLinks Indexes 
		AllowOverride none
		Require all granted
	</Directory>
	Proxyrequests off
	<Proxy *>
		#规定Deny,Allow的执行顺序, Order Deny,Allow ： 先执行Deny，再执行Allow
        Order Deny,Allow
        #全部禁止访问 取值：all none 指定ip
        Allow from All
	</Proxy>
        #配置反向代理
		ProxyPass /api http://47.103.222.56:8899/api
</VirtualHost>

在服务器的后台代码中 ，我们注意的是，开放所有的监听的端口为 0.0.0.0