小程序开发h5部署

326 阅读1分钟

跟直接部署pc端项目类似

配置

image.png

代理[源码视图中h5部分添加]

"devServer": {
    "https": true,
    "proxy": {
            "/baseApi": {
                    "target": "http://xxx.xxx.com:18082/", //要代理的域名
                    "changeOrigin": true, //允许跨域
                    "pathRewrite": {
                            "^/baseApi": "" // 这个是定义要访问的路径,名字随便写
                    }
            }
    }
    }

打包

发行 -> 网站-PC web或手机H5(H)点击

image.png

打包完显示在这个文件夹下

image.png

或者在项目根目录下
unpackage -> dist -> build -> web

打包完成之后就是一下结构

image.png

服务器端nginx配置

server {
	listen 18082 ssl; //监听的端口
	server_name xxx.xxx.com: 18082; // 你的域名

	ssl_certificate / etc / nginx / cert / xxx.xxx.com: 18082.crt; // 你的证书地址
	ssl_certificate_key / etc / nginx / cert / xxx.xxx.com: 18082.key; // 你的证书地址
	ssl_session_timeout 5m;

	// 请按照以下协议配置
	ssl_protocols TLSv1.2 TLSv1.3;
	ssl_ciphers ECDHE - RSA - AES128 - GCM - SHA256: HIGH: !aNULL: !MD5: !RC4: !DHE;
	ssl_prefer_server_ciphers on;

	location / {
		root /
		var / www / wallPaper / ; // 上传的静态文件地址[wallPaper 对应打包完成之后web的重命名放到 /var/www 文件夹下]
		index index.html index.htm;

	}
	location / baseApi / {
		proxy_pass https: //tea.qingnian8.com/;  // 代理后端接口
		proxy_set_header Access - key "qwedsa321"; // 我用的别人的开发的服务,自己开发忽略
	}
}

}

重启nginx
访问:

xxx.xxx.com:18082