vue-cli打包后本地运行dist文件中的index.html操作


Posted in Javascript onAugust 12, 2020

使用npm run build生成dist文件夹中的文件是你需要上传到服务器上的文件,

直接打开index.html会直接报错

vue-cli打包后本地运行dist文件中的index.html操作

可以尝试用express搭建一个服务器,做法如下:

1、在dist根目录下新建server.js文件;

2、代码如下:

var express = require('express');
var app = express();
const hostname = 'localhost';
const port = 3000;
app.use(express.static('./'));
app.listen(port, hostname, () => {
  console.log(·Server running at http://${hostname}:${port}·);
});

3、terminal中进入dist目录执行

npm install express

node server

4、根据terminal中提示信息,在浏览器中打开页面即可。

注:node server运行后会在本地node服务占用一个端口,该端口是在127.0.01(即localhost上),而平时开发中我们启动的npm run dev端口是我们本地实际ip地址的服务。

所以我还有一个疑问,

在项目中执行的npm run dev占用的端口和node server的端口可以占用相同一个端口,没弄懂为什么,欢迎留言

补充知识:vue项目打包后本地访问index.html页面出现空白

vue打包之后,在本地访问index.html页面是一片空白,并且控制台会报错。

解决办法

vue-cli2:首先找到config/index.js文件,将assetPublicPath的路径改为“./”

vue-cli3:在项目的根目录下创建vue.config.js,并加入以下代码。

module.exports = {
  publicPath: './',
  assetsDir: 'static',
  parallel: false
}

到了这步如果还是没有显示出来,那是因为你的路由模式的关系,你把你的路由模式改成“hash”就行了

vue中常用的路由模式 :

hash(#):默认路由模式

histroy(/)切换路由模式

切换路由模式:

export default new Router({
  // 路由模式:hash(默认),history模式
  mode: 'hash',
  // 修改路由高亮样式,默认值为'router-link-active'
  linkActiveClass: 'active'
  //路由规则
  routes:[
    {
      path:'/',
      name:'index',
      component:'Index'
    }
  ],
 
})

以上这篇vue-cli打包后本地运行dist文件中的index.html操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript showModalDialog,open取得父窗口的方法
Mar 10 Javascript
javascript笔记 String类replace函数的一些事
Sep 22 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 Javascript
微信小程序实现左滑删除效果
Nov 18 Javascript
浅谈vue中resetFields()使用注意事项
Aug 12 #Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 #Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 #Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 #Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 #Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 #Javascript
VsCode里的Vue模板的实现
Aug 12 #Javascript
You might like
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
jQuery 开天辟地入门篇一
2009/12/09 Javascript
javascript 内存回收机制理解
2011/01/17 Javascript
关于IE BUG与字符串截取substr的解决办法
2013/04/10 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
js实现返回顶部效果
2017/03/10 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
python学习基础之循环import及import过程
2018/04/22 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
python适合人工智能的理由和优势
2019/06/28 Python
python 提取文件指定列的方法示例
2019/08/07 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
简述 Python 的类和对象
2020/08/21 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
索尼巴西商店:Sony巴西
2019/06/21 全球购物
天游软件面试
2013/11/23 面试题
入党积极分子思想汇报范文
2014/01/05 职场文书
创业计划书——互联网商机
2014/01/12 职场文书
老师给学生的表扬信
2014/01/17 职场文书
学校招生宣传广告词
2014/03/19 职场文书
护士求职自荐信范文
2014/03/19 职场文书
庆元旦演讲稿
2014/09/15 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
婚内分居协议书范文
2014/11/26 职场文书
学会感恩主题班会
2015/08/12 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
辞职信怎么写?
2019/05/21 职场文书