vue cli3.0打包后在本地运行报错Http-server搭建本地服务器

1,833 阅读1分钟

1、此处说的本地运行是直接在浏览器上打开项目的入口文件,浏览器的url显示为下图所示


2、报错了,项目中有调取本地json的接口,有静态资源的图片,

3、报错是因为我们不应该直接双击入口文件在浏览器中运行,而是应该在服务器上运行,也就是说url应该是localhost或者http形式开头的,但是我们前端如果只是写个demo,又没有服务器咋办呢?别急,往下看。。。

4、从本地文件夹中直接打开的一般都是file协议,当代码中存在httphttps的链接时,HTML页面就无法正常打开,为了解决这种情况,需要在在本地开启一个本地的服务器。

本文是利用node.js中的http-server,开启本地服务,步骤如下:

1)下载node.js  官网地址: nodejs.org

下载完成后在命令行输入命令$ node -v以及$ npm -v检查版本,确认是否安装成功。

2)下载http-server,执行以下命令

npm install http-server -g

3)开启http-server服务

终端进入目标文件夹,然后在终端输入:http-server -c-1 (⚠️只输入http-server的话,更新了代码后,页面不会同步更新)

页面的url变成了如下图,打开开发者工具,不报错了


此处需要着重说明的是,页面的域名和环境域名要一致,此处用的是测试环境的域名



4)关闭服务

按快捷键CTRL-C