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 相关文章推荐
JQuery中的ready函数冲突的解决方法
May 17 Javascript
尝试在让script的type属性等于text/html
Jan 15 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
Aug 26 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
简单谈谈javascript高级特性
Sep 04 Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 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个人网站架设连环讲(一)
2006/10/09 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
js比较日期大小的方法
2015/05/12 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
深入理解Angular中的依赖注入
2017/06/26 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
[49:21]TNC vs VG 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第三场 8.20.mp4
2019/08/22 DOTA
详解Python中的join()函数的用法
2015/04/07 Python
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
业务助理岗位职责
2013/11/18 职场文书
建筑人员岗位职责
2013/12/25 职场文书
建筑项目策划书
2014/01/13 职场文书
国际商务专业求职信
2014/07/15 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
《全神贯注》教学反思
2016/02/22 职场文书