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 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
Jquery带搜索框的下拉菜单
May 06 Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
JavaScript实现的in_array函数
Aug 27 Javascript
Jquery树插件zTree用法入门教程
Feb 17 Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
Django+Vue跨域环境配置详解
Jul 06 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 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
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
php学习笔记之 函数声明(二)
2011/06/09 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
新手vue构建单页面应用实例代码
2017/09/18 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
Python中的文件和目录操作实现代码
2011/03/13 Python
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
Django xadmin安装及使用详解
2020/10/26 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
《法国号》教学反思
2016/02/22 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
goland 恢复已更改文件的操作
2021/04/28 Golang
SSM VUE Axios详解
2021/10/05 Vue.js