致力于提供有竞争力的软件解决方案和服务,德尚网络欢迎您!
技术/产品咨询
技术/产品咨询
    • - 微信扫一扫 -

      QQ:181814630

      电话:15116362044

DSO2O演示
DSMall演示
DS多平台演示
  • DSPlatform(多平台系统)演示地址及账号
    支持普通店铺,外卖店铺,上门家政,上门服务,视频教育等,Thinkphp8.0+uniapp+mysql+Vue3,拓展性强,商户可开多个不同类型店铺,
    演示角色 演示地址 账号 密码
    后台PC端 点击进入 test 123456
    商户PC端(可开多个店铺) 点击进入 seller 123456
    店铺管理PC端 点击进入 seller 123456
    手机端 点击进入 test 123456
    骑手端 点击进入 test 123456
    师傅端 点击进入 test 123456
    短视频 点击进入 test 123456
    DSPlatform(多平台系统)uniapp移动端二维码演示地址
    • 用户端

    • 机构端

H5端Vue.js安装部署

简单部署H5

1、配置一个用于H5访问的二级域名

2、打开DSMall_h5-V压缩包(压缩包在交付内容里) 进入dist文件夹找到  config.js   直接修改配置文件,以下为样例(以下dsmall域名修改为您自己网站的域名)

const env = {
  'H5_HOST': 'http://h5.dsmall.com',
  'API_HOST': 'http://www.dsmall.com/api',
  'SITE_URL': 'http://www.dsmall.com',
  'DEBUG': true,
  'ENCRYPTED': false,
}

H5_HOST:H5网页地址

API_HOST:API接口地址

SITE_URL:网站地址

3、把DSMall_h5-V 压缩包里面的 dist文件夹里面的内容全部解压到 用于H5访问的二级域名根目录下。

提示:H5端正常访问,先操作一下隐藏index.php,然后还需要在后台设置->站点设置->手机端地址里面填写刚才配置的H5二级域名,例:https://m.dsmall.csdeshang.com


最后需要修改一下服务器配置如下:


APACHE

   

    RewriteEngine On

    RewriteCond %{REQUEST_FILENAME} !-f

    RewriteCond %{REQUEST_FILENAME} !-d

    RewriteRule ^(.*)$ /index.html [L]

    


NGINX

    location / {

    try_files $uri $uri/ /index.html;

    }


IIS


自行编译部署

1.安装Node.js

下载地址:https://nodejs.org/en/

Node 版本要求   Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+),且VUE的版本要3.0以上的版本。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。


2.解压源文件至本地

例如把源文件解压至  D:\phpStudy\PHPTutorial\WWW\git\DSMall_h5\dsmall



3.CMD进入源文件目录

3.1   WIN+R,调出运行命令窗口,并输入CMD

3.2   输入cd 目录路径    例如 :

CD  D:\phpStudy\PHPTutorial\WWW\git\DSMall_h5\dsmall


4.安装依赖包

npm install


5.修改配置文件

源文件目录下   public/config.js  为配置文件

const env = {
  'H5_HOST': 'https://dsmallh5.csdeshang.com',
  'API_HOST': 'https://dsmall.csdeshang.com/api',
  'SITE_URL': 'https://dsmall.csdeshang.com',
  'DEBUG': true,
  'ENCRYPTED': false,
}

H5_HOST:H5网页地址

API_HOST:API接口地址

SOCKET_HOST:即时聊天接口地址

SITE_URL:网站地址

6.本地调试

npm run serve

7.打包编译

npm run build

编译完成之后,会在当前目录生成一个名称为  dist的目录,此目录为编译好的文件。 把此文件上传至服务器 单独为h5配置域名即可。



如果开发环境遇到跨域的问题 手机端弹出Network Error,则可以尝试以下方法


  1. 首先谷歌快捷方式上右击,在下拉列表中选择属性。

    谷歌浏览器如何设置可以解决Ajax跨域问题?

  2. 2

    打开属性窗口,切换到快捷方式选项卡下面,默认是常规选项卡。

    谷歌浏览器如何设置可以解决Ajax跨域问题?

  3. 3

    在目标路径的后面添加【 --disable-web-security】,格式如下:C:\Users\Administrator\AppData\Local\Google\Chrome\Application\chrome.exe --disable-web-security,其中chrome.exe与--disable之间有一个空格

    谷歌浏览器如何设置可以解决Ajax跨域问题?

  4. 4

    点击应用,然后点击确定关闭窗口。

    谷歌浏览器如何设置可以解决Ajax跨域问题?

  5. 5

    如果目标中的路径含有双引号,则在双引号的外面添加。

    谷歌浏览器如何设置可以解决Ajax跨域问题?

  6. 6

    关闭浏览器重新通过桌面快捷方式的形式打开浏览器,浏览器提示"您使用的是不受支持的命令行标记: --disable-web-security。稳定性和安全性会有所下降",说明设置成功。

    谷歌浏览器如何设置可以解决Ajax跨域问题?















如有不完整或不清楚,请咨询官方客服

上一篇:隐藏index.php

下一篇:IM客服安装