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

一.公网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. Python - python3.7新增的contextvars vs Thread local(threading.local)

    总结 和threading.local()类似.Python3.7新增. thread.local(): 不同线程,同一个变量保存不同的值. contextvars: 不同上下文,同一个变量保存不同的 ...

  2. AcWing 845. 八数码

    https://www.acwing.com/problem/content/847/ #include<bits/stdc++.h> using namespace std; int b ...

  3. apache http server 和tomcat的区别 以及nginx

    Apache HTTP Server(简称Apache)是Apache软件基金会的一个开放源码的网页服务器. 要明白他们之间的区别,我们首先需要明白HTTP协议.HTML页面.JSP.Servlet之 ...

  4. zabbix_agentd无法启动，cannot open log 错误

    最近有一台服务器的zabbix启动异常,看日志有如下报错 zabbix_agentd []: cannot open log: cannot create semaphore ] No space l ...

  5. LED Decorative Light Manufacturer - Decorative Lighting: Functionality And Aesthetics

    Whether it is for general ambient lighting, task lighting or accent lighting, the decorative lightin ...

  6. linux虚拟机安装jenkins及maven/jdk配置

    一.jenkins安装 (1)tomcat下载,下载地址:https://tomcat.apache.org 选择对应的版本,以下以新版的tomcat 9.0版本为例 下载zip包 (2)jenkin ...

  7. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, ...

  8. MomentJS记录下开发中用到的日期

    1.计算当前周一到周日的日期 ​​​​​​​var weekOfday = moment().format('E');//计算今天是这周第几天 var last_monday = moment().s ...

  9. Django视图层、模板层

    过滤器方法 upper 大写方式输出 add 给value加上一个数值 capfirst 第一个字母大写 center 输出指定长度的字符串,把变量居中 cut 删除指定字符串 date 格式化日期 ...

  10. Nuxt的路由动画效果

    Nuxt.js提供两种方法为路由提供动画效果,一种是全局的,一种是针对单独页面的 全局动画默认使用page来进行设置,例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果.我们可以先在根目录的 ...