配置虚拟主机来让vue项目通过nginx访问本地电脑的图片

由于vue项目无法通过本地地址（如file:///D:/upload/20211012/fa78e18f-612e-4486-9f7f-63a13a5aa6e0.jpg）访问本地电脑的图片，只能通过nginx代理来访问。

nginx的下载与安装参考：https://www.cnblogs.com/zwh0910/p/15400709.html

配置虚拟主机http://localhost:8888

修改配置文件：

http {
    include       mime.types;
    default_type  application/octet-stream;


    sendfile        on;

    keepalive_timeout  65;

    server {
        listen       8888;
        server_name  localhost;

        location / {
            root D:/upload;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }
}

注意：

1、修改端口为8888，以避免端口冲突。

2、用root而不是alias.

启动nginx,访问：http://localhost:8888/20211012/fa78e18f-612e-4486-9f7f-63a13a5aa6e0.jpg，可以看到图片，如下

 在vue项目的代码中访问本地电脑的图片

<view v-if="key == '入场检验报告'" class="bottom_detail_list_cell">
                        <view class="bottom_detail_name">
                            <text>{{key}}</text>
                        </view>
                        <view class="bottom_detail_content sub_detail_arrow">
                            <button class="mini-btn" type="primary" size="mini" @tap="toFilePage(key,['http://localhost:8888' + value])">查看文件</button>
                        </view>
                    </view>

实际开发中代码：

<view v-if="key == '入场检验报告'" class="bottom_detail_list_cell">
                        <view class="bottom_detail_name">
                            <text>{{key}}</text>
                        </view>
                        <view class="bottom_detail_content sub_detail_arrow">
                            <button class="mini-btn" type="primary" size="mini" @tap="toFilePage(key,[this.$globalParam.globalUrl + value])">查看文件</button>
                        </view>
                    </view>