前提是已经配置好了相应的外网和内网端口的映射

一.公网ip和端口配置

在vue项目启动之前对项目下：项目名/config/index.js 文件进行修改

原来的内容为：(位置在index.js的第16,17行作用)

    host: 'localhost', // can be overwritten by process.env.HOST

    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined

修改为0.0.0.0 和8070端口：

    host: '0.0.0.0', // can be overwritten by process.env.HOST

    port: 8070, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined

二.使用域名+端口访问配置

没有配置的情况下通过域名加端口访问出现：

在如下截图的位置加这个配置：

disableHostCheck: true,// 解决域名访问本地运行地址时出现Invalid Host header的问题

在此用：npm run dev  运行

此时用域名加端口访问正常

此种部署有很大的缺点，不适合生成环境中，只能用于项目代码测试

VUE项目部署公网ip和端口以及使用域名访问配置的更多相关文章

  1. django项目、vue项目部署云服务器

    目录 上线架构图 服务器购买与远程连接 安装git 安装mysql 安装redis(源码安装) 安装python3.8(源码安装) 安装uwsgi 安装虚拟环境 安装nginx(源码安装) vue项目 ...

  2. Vue项目无法使用局域网IP直接访问的配置方法

    一般使用 vue-cli 下来的项目是可以直接访问局域网 IP 打开的,比如 192.168.1.11:8080 .但是最近公司的一个项目只可以通过 localhost 访问. 需要配置一下,才可直接 ...

  3. node vue 项目部署问题汇总

    场景:vue-router为history模式,不带项目名访问的部署,如果资源是用相对路径加载,则资源匹配路径不对 一.带项目名称访问,如部署到tomcat服务上 webpack:  build/ut ...

  4. 阿里云安装Nginx+vue项目部署

    阿里云安装Nginx+vue项目部署 nginx安装包下载 http://nginx.org/en/download.html nginx安装 首先先安装PCRE pcre-devel 和Zlib,因 ...

  5. Vue项目部署问题及解决方案

    Vue项目部署问题及解决方案 Vue-Router 有两种模式,默认是 hash 模式,另外一种是 history 模式. hash:也就是地址栏里的 # 符号.比如 http://www.examp ...

  6. vue 项目部署

    vue项目部署到PHP项目 入口目录 vue项目打包后, 是一个单文件html 我们只需要把打包后的文件夹放在php项目的public下面 访问 xxx.com/h5/index.html 就可以访问 ...

  7. 将vue项目部署在Linux的Nginx下，并设置为局域网内访问

    1. 下载 wget http://nginx.org/download/nginx-1.12.2.tar.gz 2. 解压缩 tar -zxvf linux-nginx-1.12.2.tar.gz ...

  8. vue项目部署到IIS服务器上

    前端Vue项目需要部署到IIS服务器上: 准备工作: 1:部署IIS服务器 2:项目npm run build打包生成需要部署的文件(dist文件夹)我的是manage文件夹 开始部署: 1:复制文件 ...

  9. vue项目部署上线

    前言 今天把自己写的demo登录写完了,就想着试着走一下部署上线的流程.参考了很多的文档,终于成功进行了部署.在这里将服务器的搭建和vue项目的 部署上线进行整理(都是基础的知识,希望对大家有帮助.对 ...

随机推荐

  1. vue基础实例

    <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> ...

  2. Git的基本使用 -- 分支管理

    查看分支 git branch 前面带 * 的为当前所在分支 创建分支 git branch 分支名 切换分支 git checkout 分支名 创建并切换到此分支 git checkout -b 分 ...

  3. 网络https工作原理

    网络https工作原理 待办 https://www.runoob.com/w3cnote/https-ssl-intro.html

  4. mongo备份操作

    数据备份mongodump 可以用mongodump 来做MongoDB 的库或表级别的备份,下面举例说明: >c:\mongo\bin\mongodump -d  xxxx数据库 此时会在当前 ...

  5. BeautifulReport报告

    Project description BeautifulReport 一个基于unittest.TestResult模块实现的测试用例模板, 可把测试中的结果通过BeautifulReport整合成 ...

  6. Python爬取微博热搜以及链接

    基本操作,不再详述 直接贴源码(根据当前时间创建文件): import requests from bs4 import BeautifulSoup import time def input_to_ ...

  7. js判断有无属性及新添属性

    1.Object 判断有无新属性 obj.hasOwnProperty(propertyName)  //有无指定属性propertyName        Object.keys(obj)      ...

  8. selenium参数化-ddt模块

    DDT介绍: DDT(数据驱动测试)允许您通过使用不同的测试数据运行一个测试用例来使其倍增,并使它显示为多个测试用例.要使用DDT需要安装,安装命令:pip install ddt 使用方法: dd. ...

  9. redis 解决秒杀

    # import redis pool = redis.ConnectionPool(host = '127.0.0.1', port=6379, db=0)#创建连接池 r = redis.Redi ...

  10. 解决com.netflix.zuul.FilterProcessor : null异常

    ZuulFilter过滤器的filterType方法返回一个字符串代表过滤器的类型,如果return null就会出现以上错误. 在zuul中有以下四种不同生命周期的过滤器类型 pre:路由之前 ro ...