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/Css 文件的代码
Jul 03 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
在 Express 中使用模板引擎
Dec 10 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
Vue.Js中的$watch()方法总结
Mar 23 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
vue-router源码之history类的浅析
May 21 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 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模板函数 正则实现代码
2012/10/15 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
python获取指定网页上所有超链接的方法
2015/04/04 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
Python多进程fork()函数详解
2019/02/22 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
机电一体化职业规划书
2014/01/07 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
推销搭讪开场白
2015/05/28 职场文书
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers