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 相关文章推荐
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
javascript无刷新评论实现方法
May 13 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
vue router 传参获取不到的解决方式
Nov 13 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 Javascript
小程序富文本提取图片可放大缩小
May 26 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计划任务、定时执行任务的实现代码
2011/04/23 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
js的三种继承方式详解
2017/01/21 Javascript
vue axios用法教程详解
2017/07/23 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
python BeautifulSoup使用方法详解
2013/11/21 Python
Python爬取APP下载链接的实现方法
2016/09/30 Python
Python 备份程序代码实现
2017/03/06 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
python使用opencv读取图片的实例
2017/08/17 Python
python清理子进程机制剖析
2017/11/23 Python
Django框架模板的使用方法示例
2019/05/25 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
详解Python实现进度条的4种方式
2020/01/15 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
Python 没有main函数的原因
2020/07/10 Python
世界上最大的艺术社区:SAA
2020/12/30 全球购物
2014年租房协议书范本
2014/10/30 职场文书