场景

Vue的项目执行

npm run build

后会在本地dist下生成打包后的文件

但是此文件给后端后就能访问，

如果直接在本地双击在浏览器中打开就会提示一堆文件路径找不到。

这是因为直接在本地访问打开的话，请求资源的url是如上图file://那种开头的路径，需要的是类似于

localhost:8080/这样的在服务器中的访问路径。

经过参考别人的博客，有将vue.config.js中的

publicPath: './',

改为相对路径的，但是在我这里不适用。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

可以通过在本地启用一个服务来访问。

首先在dist目录下新建server.js

var express = require('express');var app = express();const hostname = 'localhost';const port = 8080;app.use(express.static('./'));app.listen(port, hostname, () => {console.log(`Server is running `);});

注意上面的hostname指的是访问的ip,这里是localhost代表本机。

但是使用了localhost后不能使用本机Ip进行访问。

同理如果想将此项目部署到服务器中，也不能设置为localhost，必须设置为服务器的ip。

然后port是端口号，这里是8080

上面是使用的node的的web应用框架Express来充当本地服务器。

所以需要在本地安装express。这里使用npm进行安装。

所以前提是你的电脑需要安装node

所以在dist目录下打开命令行

npm install express

安装成功后启动express服务

node server

启动成功后localhost:8080就相当于dist目录，所以如果想访问dist下的index.html就需要访问

http://localhost:8080/index.html

Vue本地执行build之后打开dist目录下index.html正常访问相关推荐

npm安装vue，在vue/dist目录下没有产生vue.js文件
遇到问题:在进行npm install时,vue/dist目录下没有生成vue.js的情况. 解决办法:只在vue后面加上@2指定版本即可. npm init -y npm install vue@2 ...
SpringBoot打开resources目录下的文件操作
SpringBoot打开resources目录下的文件操作背景我想在SpringBoot项目中放入一个静态文件.json文件.然后在SpringBoot项目内可以打开并读取此json文件. [外链 ...
cmd打开某个目录下的程序
cmd打开桌面的程序点击键盘上的windows键,打开开始菜单,输入 cmd 输入 cd desktop,进入桌面的目录输入: dir,可看到目录下的所有文件输入: start 桌面的某个程序名 ...
修改apache2.config里的 AllowOverride All ，也已经把 .htaccess文件放入网站目录下，但无法访问网站（500错误，提示为服务器问题）
问题:已经修改apache2.config(非Ubuntu为 httpd.config)里的 AllowOverride All ,也已经把 .htaccess文件放入网站目录下 ,但无法访问网站(5 ...
一个后端童鞋步入 vue 深渊引发的惨案： VSCode Vue开发目录下多个路由访问重叠不生效问题解决
文章目录一.再现二.破局入乡随俗横刀立马三.开局一.再现有时候前端为了维护某个模块[如下文的系统管理],习惯上会将开发的代码都维护在该目录下,无论从业务和开发理解角度都是没错的,无奈vu ...
android 相册目录,调用android系统相册批量打开指定目录下的图片
测试方法: 在sdcard 目录下新建名为photo的文件夹 .并将此文件夹中复制少量图片.import java.io.File; import android.app.Activity; im ...
关于把war包放在Tomcat的webapps目录下启动服务前端访问报404
记录一下一些低级的错误当时电脑上解压了两个版本的Tomcat 一个是9.0.54 一个是10.0.12 我用idea的Maven对springboot的web项目进行打包练习当时把war包放在了低 ...
Java：WEB-INF目录下JSP页面的访问方法
访问WEB-INF目录下的JSP页面 WEB-INF目录下的JSP页面是不能直接通过浏览器访问到的,必须通过控制的转发才能访问到页面 1. 浏览器直接访问浏览器访问http://localhost: ...
Ubuntu 系统使用命令打开某个目录下的代码文件
这个是自己在处理冲突的代码的时候的时候经常使用到的一般git status 显示冲突文件的路径方法如下 gedit + 文件路径这样就会打开一个记事本的代码文件, 处理完冲突保存即可.

Vue本地执行build之后打开dist目录下index.html正常访问

场景

实现

Vue本地执行build之后打开dist目录下index.html正常访问相关推荐

最新文章

热门文章