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

      QQ:181814630

      电话:15116362044

DSShop演示
DSO2O演示
DSMall演示

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客服安装