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 相关文章推荐
FormValidate 表单验证功能代码更新并提供下载
Aug 23 Javascript
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 Javascript
json原理分析及实例介绍
Nov 29 Javascript
js中的replace方法使用介绍
Oct 28 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
javascript实现日期按月份加减
May 15 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
Angular弹出模态框的两种方式
Oct 19 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 Javascript
微信小程序实现商城倒计时
Nov 01 Javascript
webpack 最佳配置指北(推荐)
Jan 07 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
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
js实现拖拽效果
2015/02/12 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
使用vue-cli导入Element UI组件的方法
2018/05/16 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
python中sets模块的用法实例
2014/09/30 Python
Python的subprocess模块总结
2014/11/07 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
python爬取网页内容转换为PDF文件
2020/07/28 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
pyspark 随机森林的实现
2020/04/24 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
急诊科护士自我鉴定
2013/10/14 职场文书
国培教师自我鉴定
2014/02/12 职场文书
新学期开学寄语2016
2015/12/04 职场文书