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 相关文章推荐
javascript 精粹笔记
May 09 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
js实现中文实时时钟
Jan 15 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 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
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
jquery创建div 实现代码
2009/04/27 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
利用Python实现图书超期提醒
2016/08/02 Python
python计算列表内各元素的个数实例
2018/06/29 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
tensorflow常用函数API介绍
2020/04/19 Python
生产车间实习自我鉴定
2013/09/23 职场文书
自动化专业毕业生自荐信
2013/11/01 职场文书
医学生自我评价
2014/01/27 职场文书
工商干部先进事迹
2014/05/14 职场文书
职工小家建设活动方案
2014/08/25 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
报案材料怎么写
2015/05/25 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
Redis高可用集群redis-cluster详解
2022/03/20 Redis