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 相关文章推荐
WordPress JQuery处理沙发头像
Jun 22 Javascript
Javascript的一种模块模式
Sep 08 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 Javascript
js取得html iframe中的元素和变量值
Jun 30 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 Javascript
JavaScript手机振动API
Jun 11 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 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
JAVA/JSP学习系列之二
2006/10/09 PHP
php代码把全角数字转为半角数字
2007/12/10 PHP
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
PHP和.net中des加解密的实现方法
2013/02/27 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
把input初始值不写value的具体实现方法
2013/07/04 Javascript
js 走马灯简单实例
2013/11/21 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
js实现计算器功能
2020/08/10 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
对python中的logger模块全面讲解
2018/04/28 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
销售自我评价
2013/10/22 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
日元符号 ¥
2022/02/17 杂记
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS