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 继承详解 第一篇
Aug 30 Javascript
window.location.hash 属性使用说明
Mar 20 Javascript
javascript Array数组对象的扩展函数代码
May 22 Javascript
jquery随机展示头像代码
Dec 21 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
Dec 17 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 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取整数函数常用的四种方法小结
2012/07/05 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
Javascript验证方法大全
2015/09/21 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
Webpack实战加载SVG的方法
2017/12/26 Javascript
Python getopt模块处理命令行选项实例
2014/05/13 Python
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
Python类及获取对象属性方法解析
2020/06/15 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
网络安全类面试题
2015/08/01 面试题
构造方法和其他方法的区别
2016/04/26 面试题
求职信内容一般写什么?
2015/03/20 职场文书
销售人员管理制度
2015/08/06 职场文书
感恩教育主题班会
2015/08/12 职场文书
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫