vue本地打开build后生成的dist文件夹index.html问题


Posted in Javascript onSeptember 04, 2019

1.问题描述:

npm run build 在dist 文件生成了 index 和 static 文件夹,为什么本地打开不了,给后端就能打开?

如何才能像访问 npm run dev 的地址那样访问?

2.种简单方法

2.1 修改配置在本地访问

更改一些路径参数后,然后再次运行npm run build 就可以在本地打开index.html

改哪里?

config/index.js文件

build: {
 assetsPublicPath: '/'
}

改成

build: {
 assetsPublicPath: './'
}

修改后再次运行 npm run build

双击 index.html 即可

2.2 通过在dist 目录中起服务访问

step1:

在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 running at http://${hostname}:${port}`);
 });

step 2:

在dist 路径下,npm install express

step 3:

node server

3.其他:

3.1 本地访问不足

如果ajax请求的数据是通过访问本地文件伪造的,那么会报跨域错误

不支持跨域读取本地data

本地访问路径如:

file:///Users/Downloads/vue-travel-master/dist/index.html

3.2 生产环境不支持proxyTable

config/index.js 中,只有开发环境dev中配置了proxyTable,支持访问代理路径

但是在 build 中配置无效,不支持代理地址

比如我在开发环境中请求数据

axios.get('/api/index.json?city=' + this.city)

开发环境的proxyTable:

proxyTable: {
 '/api': {
 target: 'http://localhost:8080',
 changeOrigin:true,//允许跨域
 pathRewrite: {
  '^/api': '/static/mock'
 }
 }

访问路径会替换成  http://localhost:8080/static/mock/index.json

但是生产环境不支持这样,路径要写全: 

axios.get('/static/mock/index.json?city=' + this.city)

这样在dist目录下 node server 就可以访问了和 npm run dev 的效果是一模一样的!

起服务访问地址:

http://localhost:8080/static/js/app.5115f466b0f6ef56da51.js

3.3 express 配置

var express = require('express'); 
var app = express(); 
const hostname = 'localhost';
const port = 8080;
//Express 提供了内置的中间件 express.static 来设置静态文件
app.use(express.static('./'));

app.listen(port, hostname, () => {
 console.log(`Server running at http://${hostname}:${port}`);
});
express.static('./')

express 会在静态资源目录下查找文件,即server.js的上层路径dist目录,现在你可以加载dist 目录下的文件了,如:

http://localhost :8080/static/mock/index.json?city=%E4%B8%8A%E6%B5%B7

访问路径为:

——dist 
 ——static 
  ——css
  ——js
  ——mock
   ——a.json
 ——index.html 
 ——server.js

4. 代码

4.1 可运行代码链接

可下载运行试试

总结

以上所述是小编给大家介绍的vue本地打开build后生成的dist文件夹index.html问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 Javascript
vue实现购物车小案例
Sep 27 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 Javascript
js实现网页随机验证码
Oct 19 Javascript
简单谈谈javascript高级特性
Sep 04 #Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 #Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 #Javascript
mui js控制开关状态、修改switch开关的值方法
Sep 03 #Javascript
Layui给switch添加响应事件的例子
Sep 03 #Javascript
layui--js控制switch的切换方法
Sep 03 #Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 #Javascript
You might like
亲密接触PHP之PHP语法学习笔记1
2006/12/17 PHP
一步一步学习PHP(8) php 数组
2010/03/05 PHP
解析strtr函数的效率问题
2013/06/26 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
php防止表单重复提交实例讲解
2019/02/11 PHP
js程序中美元符号$是什么
2008/06/05 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
Python如何实现守护进程的方法示例
2017/02/08 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
Python实现多属性排序的方法
2018/12/05 Python
tensorflow如何批量读取图片
2019/08/29 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
wxPython多个窗口的基本结构
2019/11/19 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
代码中finally中的代码会不会执行
2012/02/06 面试题
检查接待方案
2014/02/27 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
导游词之镇江焦山
2019/11/21 职场文书
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
Python几种酷炫的进度条的方式
2022/04/11 Python