打包、运行

PC端

打包

tip

PC端打包场景分为开发、测试、生产环境，每种场景对应配置文件中不同的参数，详见配置文件详解

各个场景的打包命令参考下面的表格

场景	yarn命令
开发	yarn run dev
测试	yarn run build:test
生产	yarn run build:prod

运行

开发环境通过命令运行后会直接调起浏览器，可以直接开发、联调、测试。
测试环境和生产环境，运行命令后，会构建目标文件在 dist 目录，需要通过如下nginx配置使其可以被外部访问

server {
    listen       80;
    server_name  localhost;

    location / {
        root /yourdist #配置为相应的dist目录;
        try_files $uri $uri/ /index.html $uri/ =404;
        index  index.html index.htm;
    }
}

如果访问域名使用了虚拟目录，那么nginx配置如下：

API域名nginx配置：

server {
  listen 80;
  server_name www.test.com;
  
  #--------如果是https访问，需要使用如下配置-------
  listen 443 ssl;
  server_name www.test.com;

  ssl on;
  ssl_certificate /opt/ssl/www.test.com.pem;
  ssl_certificate_key /opt/ssl/www.test.com.key; 
  ssl_session_timeout 1d;
  ssl_session_cache shared:SSL:50m;
  ssl_session_tickets off;
  ssl_protocols TLSv1.2;
  ssl_ciphers 'ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256';
  ssl_prefer_server_ciphers on;
  ssl_stapling on;
  ssl_stapling_verify on;
  #--------如果是https访问，需要使用如上配置-------

  location /base-api/ {
    proxy_pass    http://ip:7001/;
    proxy_set_header Host                $host:$server_port;
    proxy_set_header X-Forwarded-For     $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto   $scheme;
    proxy_set_header X-Forwarded-Port    $server_port;
    proxy_pass_header User-Agent;
  }

  location /buyer-api/ {
    proxy_pass    http://ip:7002/;
    proxy_set_header Host                $host:$server_port;
    proxy_set_header X-Forwarded-For     $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto   $scheme;
    proxy_set_header X-Forwarded-Port    $server_port;
    proxy_pass_header User-Agent;
  }

  location /seller-api/ {
    proxy_pass    http://ip:7003/;
    proxy_set_header Host                $host:$server_port;
    proxy_set_header X-Forwarded-For     $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto   $scheme;
    proxy_set_header X-Forwarded-Port    $server_port;
    proxy_pass_header User-Agent;
  }

  location /manager-api/ {
    proxy_pass    http://ip:7004/;
    proxy_set_header Host                $host:$server_port;
    proxy_set_header X-Forwarded-For     $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto   $scheme;
    proxy_set_header X-Forwarded-Port    $server_port;
    proxy_pass_header User-Agent;
  }
}

商城访问域名nginx配置：

server {
  listen 80;
  server_name www.test.com;
  
  #--------如果是https访问，需要使用如下配置-------
  listen 443 ssl;
  server_name www.test.com;

  ssl on;
  ssl_certificate /opt/ssl/www.test.com.pem;
  ssl_certificate_key /opt/ssl/www.test.com.key; 
  ssl_session_timeout 1d;
  ssl_session_cache shared:SSL:50m;
  ssl_session_tickets off;
  ssl_protocols TLSv1.2;
  ssl_ciphers 'ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256';
  ssl_prefer_server_ciphers on;
  ssl_stapling on;
  ssl_stapling_verify on;
  #--------如果是https访问，需要使用如上配置-------

  location /admin {
    alias /opt/server/ui/manager-admin/dist/;
    index index.html  index.htm;
    try_files $uri $uri/ /admin/index.html;
  }

  location /pc {
    alias /opt/server/ui/buyer/dist/;
    index index.html  index.htm;
    try_files $uri $uri/ /pc/index.html;
  }

  location /shop {
    alias /opt/server/ui/manager-seller/dist/;
    index index.html  index.htm;
    try_files $uri $uri/ /shop/index.html;
  }

  location /decor {
    alias /opt/server/ui/manager-decor/dist/;
    index index.html  index.htm;
    try_files $uri $uri/ /decor/index.html;
  }

  location /h5 {
    alias /opt/server/ui/h5/dist/;
    index index.html  index.htm;
    try_files $uri $uri/ /h5/index.html;
  }
}

移动端

打包

tip

移动端打包场景分为开发、生产环境，每种场景对应配置文件中不同的参数，详见配置文件详解

移动端使用uniapp构建，需要使用HBuilderX来打包

开发环境

1、确保在config/config.js文件中配置好api和domain的域名

2、点击菜单栏：运行→运行到浏览器→选择一个浏览器

hbuilder进行编译后，会自动打开浏览器。

生产环境

1、确保在config/config.js文件中配置好api和domain的域名

2、点击菜单栏：发行 → 网站-H5手机版 → 配置网站标题和网站域名

3、查看控制台输出的h5路径，h5文件夹就是我们打包后的h5

4、将h5文件夹上传到服务器，放在nginx虚拟目录中即可

如：

server {
    listen       80;
    server_name  localhost;

    location / {
        root /yourdist #配置为相应的h5目录;
        try_files $uri $uri/ /index.html $uri/ =404;
        index  index.html index.htm;
    }
}

微信小程序、app打包详解：”uniapp指南“

打包、运行

PC端​

打包​

tip

运行​

移动端​

打包​

tip

开发环境​

生产环境​

PC端

打包

运行

移动端

打包

开发环境

生产环境