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

一.公网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. C#中获取时间戳

    { 注意:下面是以毫秒为单位的13位  UTC  时间戳(非正规) }//先取得当前的UTC时间,然后转换成计算用的周期数(简称计时周期数),每个周期为100纳钞(ns)=0.1微秒(us)=0.00 ...

  2. 数据库之一、数据库简介及SQL概要

    1.数据库简介: 数据库(Database,DB)是一个长期存储在计算机内的.有组织的.有共享的.统一管理的数据集合.简单来讲就是可以放大量数据的地方.管理数据库的计算机系统称为数据库管理系统(Dat ...

  3. C语言随笔1：内存分配方式与动静态变量

    首先几个基本概念(网上的各种说法都很乱:个人理解整理了一下 内存分类方法很多,动态.静态:  五区:  三段: 内存的区: 1.动态存储区分为 栈区.堆区   也统称为堆栈段1.1栈区(.stack) ...

  4. char nchar varchar nvarchar varchar2区别

    char(n):长度不可变,长度为n个字节,非Unicode字符 nchar(n):长度不可变,长度为2n个字节,Unicode字符 varchar(n):长度可变,长度为n个字节,非Unicode字 ...

  5. 工具使用：xmind

    概念 心智图,又称脑图.思维导图.灵感触发图.概念地图或思维地图,是一种图像式思维的工具与及一种利用图像式思考辅助工具来表达思维的工具. 详细的可以查看这里(维基百科)还有这里(百度百科) 用了思维导 ...

  6. Nginx中常见问题与错误处理

    1.400 bad request错误的原因和解决办法 配置nginx.conf相关设置如下. client_header_buffer_size 16k;large_client_header_bu ...

  7. C语言 puts

    C语言 puts #include <stdio.h> int puts(const char *s); 功能:标准设备输出s字符串,在输出完成后自动输出一个'\n'. 参数: s:字符串 ...

  8. MySQL 的两种存储引擎

    MyISAM 是MySQL的默认数据库引擎(5.5以后默认是InnoDB)性能极佳,但不支持事务处理. InnoDB 是MySQL的数据库常用的数据引擎. MyISAM 和 InnoDB 两者之间有明 ...

  9. 使用maven 打包springboot项目步骤以及所遇到的问题

    1.首先必须确保java和maven是安装好的,并且环境变量配置正确 2.接着可以看一下我们项目中的pom.xml中的以下配置 packaging那里很关键,表示我们打包项目的类型,可以为jar 也可 ...

  10. Scrapy爬取伯乐在线的所有文章

    本篇文章将从搭建虚拟环境开始,爬取伯乐在线上的所有文章的数据. 搭建虚拟环境之前需要配置环境变量,该环境变量的变量值为虚拟环境的存放目录 1. 配置环境变量 2.创建虚拟环境 用mkvirtualen ...