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 相关文章推荐
关于URL中的特殊符号使用介绍
Nov 03 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 Javascript
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
May 14 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实现异步操作的研究
2013/02/03 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
javascript 隔行换色函数代码
2010/10/24 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
gulp构建小程序的方法步骤
2019/05/31 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
python实现文件名批量替换和内容替换
2014/03/20 Python
python简单程序读取串口信息的方法
2015/03/13 Python
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
Python实现随机爬山算法
2021/01/29 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
关于赌博的检讨书
2014/01/08 职场文书
美发活动策划书
2014/01/14 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android