vue项目在线上服务器访问失败原因分析

珊妹儿遇到一个奇葩问题哈，跟大家伙来分享分享，首先因为刚接手的项目，我还没有线上服务器的连接信息，前端代码都是我打包好给别人，别人传到服务器的，传到线上服务器访问不了，这就是中间出现了问题。

所谓，打包就是压缩的概念，而压缩文件再次压缩就会导致文件成倍的增大，这中间就出现了很多问题，我们排除了很多问题都没找见原因，后来我就寻思拿U盘拷一份再试试，结果成功了！！！！！

据珊妹儿多年经验来分析，用U盘直接拷贝的是源文件，而压缩完传过去的压缩包再解压缩，就不是原来的文件了！嗯 应该是这个原因。。。。。。

补充知识：vue项目在使用ip地址加端口号不能访问时

修改package.json文件的scripts属性下的dev属性

加上–host 0.0.0.0后再重启服务器

 "scripts": {
  "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "lint": "eslint --ext .js,.vue src",
  "build": "node build/build.js"
 }

以上这篇vue项目在线上服务器访问失败原因分析就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 本地服务不能被外部IP访问的完美解决方法

    解决 webpack-dev-serveri 启动后通过外部访问报错 invalid host header 修改 config/index.js 的 host 属性为 '0.0.0.0' { // ..., host: '0.0.0.0', port: 8080, // ... } 修改 build/webpack.dev.conf.js 的 devServer 配置 增加 disableHostCheck = true devServer: { clientLogLevel: 'warnin

  • 解决vue中使用proxy配置不同端口和ip接口问题

    问题描述: 使用vue-cli创建的项目,开发地址是localhost:8080,由于后台开发不同的模块,导致每个模块请求的ip和端口号不一致 例如:http://192.168.10.22:8081  或者 http://192.168.10.30:9999等 解决问题: 在vue.config.js中配置不同的端口号 module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/', devSe

  • Vue修改项目启动端口号方法

    在项目的package.json中可以找到如下代码 start属性指定的文件就是通过开发模式启动的服务文件 "scripts": { "dev": "node build/dev-server.js", "start": "node build/dev-server.js", "build": "node build/build.js", "lint&quo

  • vue项目在线上服务器访问失败原因分析

    珊妹儿遇到一个奇葩问题哈,跟大家伙来分享分享,首先因为刚接手的项目,我还没有线上服务器的连接信息,前端代码都是我打包好给别人,别人传到服务器的,传到线上服务器访问不了,这就是中间出现了问题. 所谓,打包就是压缩的概念,而压缩文件再次压缩就会导致文件成倍的增大,这中间就出现了很多问题,我们排除了很多问题都没找见原因,后来我就寻思拿U盘拷一份再试试,结果成功了!!!!! 据珊妹儿多年经验来分析,用U盘直接拷贝的是源文件,而压缩完传过去的压缩包再解压缩,就不是原来的文件了!嗯 应该是这个原因.....

  • 解决vue项目打包上服务器显示404错误,本地没出错的问题

    1.使用脚手架搭建一个vue项目 2.运行,在本地运行没问题,接着打包上服务器,遇到404的错误,如下 这是webpack打包的结果,解决办法如下 1.修改build文件夹下的utils.js文件,大约在51行添加 publicPath:"../../" if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:&quo

  • 解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题

    Vue项目不能使用localhost:8xx0进入项目,但是将localhost替换为127.0.0.1却可以进入. 解决办法: 进入文件 C:\Windows\System32\drivers\etc\hosts 用记事本打开 hosts 文件进行编辑,看看文件里是否有 127.0.0.1 localhost localhost 127.0.0.1 如果没有的话就加上,具体加入位置如下 # 127.0.0.1 localhost # ::1 localhost //加上的代码 127.0.0.

  • vue项目打包上传github并制作预览链接（pages）

    当Vue项目完成后,在根目录下打开命令行,输入命令: npm run build 实际上此命令就是执行build.js文件,将项目打包成静态资源. 此命令完成后,项目根目录下会多出一个dist文件夹,dist文件里面有: static文件下包括项目打包后的css.js.img.fonts(字体图标). 项目资源无法加载 点击index.html,浏览器显示该页面是空白的.打开控制台看到index.html文件中没有加载任何css.js文件. 解决方法: 打开项目根目录config下的index.

  • 多个Vue项目部署到服务器的步骤记录

    一.业务描述: 最近在做一个电商的项目,里面有平台端和商家端以及用户端,那么这么多Vue项目如何部署到服务器呢? 二.部署 (1)首先在本地测试项目可以启动并且能正常运行. (2)在项目中输入npm run build 此时会生成一个文件 (3)在服务器上安装Nginx,并将admin-web上传到服务器. 我上传的位置: (4)修改Nginx文件,找到nginx.conf  三.如果此时有多个vue项目呢? 多加几个location即可 四.最后记得保存 :wq 五.重新启动Nginx sys

  • django项目、vue项目部署云服务器的详细过程

    django项目、vue项目部署云服务器的详细过程

    目录 上线架构图 服务器购买与远程连接 安装git 安装mysql 安装redis(源码安装) 安装python3.8(源码安装) 安装uwsgi 安装虚拟环境 安装nginx(源码安装) vue项目部署 django项目部署 项目依赖安装 数据库配置 使用uwsgi启动django 后端样式处理 上线架构图 服务器购买与远程连接 服务器可以在阿里云控制台首页 (aliyun.com).登录 - 腾讯云 (tencent.com)购买. 这里我选择购买阿里云的云服务器ECS,购买时按自己需求,镜

  • 将VUE项目部署到服务器的详细步骤

    将VUE项目部署到服务器的详细步骤

    目录 一.idea中vue项目的打包 1.设置打包后项目的名称 2.将项目打包 3.生成的包内的文件如下: 二.部署到服务器 1.找到Nginx的安装位置 2. 将打包后的vue项目文件放在html文件架下面 3.将打包后的文件夹上传至html文件夹 4.配置打开页面的路径 三.用IP地址访问 总结 宝塔面板上操作 一.idea中vue项目的打包 1.设置打包后项目的名称 publicPath:process.env.NODE_ENV === 'production' ? '/back/' :'

  • HBuilder导入vue项目并通过域名访问的过程详解

    HBuilder导入vue项目并通过域名访问的过程详解

    目录 一.什么是node.js 二.node.js和npm关系 三.导入项目 通常运行vue项目需要安装Node.js.通过npm命令来安装vue组件和运行vue项目. 一.什么是node.js node.js不是一门语言,不是库,不是框架,只是一个javeScript运行时环境 简单的就是node.js可以解析和执行javeScript代码,以前只有浏览器可以解析执行JaveScript代码, 现到的javeScript可以完全脱离浏览器来运行,一切都归功于node.js. nodejs构建于

  • webpack vue项目开发环境局域网访问方法

    思路:将自己的项目启动ip与端口固定,当然端口也可以为默认的8080 步骤: 1.查看自己在局域网内的ip 命令行 ipconfig 2.回到自己的开发目录,在根目录找到comfig/index.js 修改 host: 自己的局域网ip 修改 port: 自定义端口-最好不要用80或者其他常用端口 示例:comfig/index.js host:'http://192.168.2.153',//一定要加上 http port:3000 注意:此处ip一旦固定,本机访问的或localhost将不可

  • Vue项目配置跨域访问和代理proxy设置方式

    在vue单页应用项目开发时,避免不了要请求后端,这时通常就会出现跨域问题.有2种常用的解决方案 后端设置允许跨域访问 前端通过代理进行访问后端 下面我们只说说如何配置vue-cli代理访问: vue-cli代理 最简单就是配置vue conifg进行实现 下面配置3个请求的后端,分别是: 请求http://localhost:4201/adminapi/*会代理请求http://localhost:8180/* 请求http://localhost:4201/portalapi/*会代理请求ht

随机推荐