当你在本地直接打开index.html

你会发现了一丢丢404，这时候你有两个办法解决问题：

1：改变路径为相对路径。

在config 文件夹中index.js的 build对象里， 把 assetsPublicPath的 “/”改为 “./”。

2：

安装serve , 使用服务器环境运行。。个人倾向第二种方法

npm install serve -g

cd dist

serve

Vue-cli 构建项目后 npm run build 如何在本地运行查看的更多相关文章

  1. npm run build之后生成的dist如何扔到服务器运行（npm run build之后如何本地运行）

    运行npm run build之后,会生成一个dist文件夹,里面的目录结构大概是这样的: 生成完的文件我们怎么来运行呢?直接在本地打开inde.html是无法运行的,打包的时候有提示: 构建文件应该 ...

  2. vue init初始化项目后 npm run dev报错 10% building modules 1/1 modules 0 activeevents.js:182 throw er; // Unhandled 'error' event

    报错信息: 10% building modules 1/1 modules 0 activeevents.js:182       throw er; // Unhandled 'error' ev ...

  3. VUE-CLI Vue安装及开发，npm run build无法查看项目的问题

    Vue-cli 本地安装vue项目 需要安装node.js,用node命令行npm的方式安装Vue 步骤: 1.进入项目地址安装 npm install vue-cli -g 2.初始化一下 ESli ...

  4. React项目配置npm run build命令分环境打包

    使用create-react-app脚手架创建的项目默认隐藏了webpack等配置文件信息,使用npm run eject命令暴露这些隐藏的配置文件信息 项目默认有两个环境:开发环境(npm star ...

  5. VUE学习笔记之vue cli 构建项目

    一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...

  6. Vue - 如何使用npm run build后的dist文件夹

    脚手架vue cli生成项目后,使用 npm run build 生成了一个dist文件夹(应该是distribution的缩写) 只要放在http服务器上就可以运行. 使用一句python命令可以搭 ...

  7. vue 关于npm run build 的小问题

    vue项目使用npm run build命令进行打包操作,打包之后试运行报错,报错为: 且命令行警告信息为: 解决办法: 找到项目目录下的config文件夹里的index.js文件,将build对象下 ...

  8. linux vue项目+npm run build + nginx

    系统 环境 vue   nginx 步骤 1.打包vue项目 2.配置nginx 打包vue项目 1.项目配置   我们使用服务器的8000端口 2.打包 # npm run build 打包成功会创 ...

  9. npm run build后如何打开index.html跑起项目

    Tip: built files are meant to be served over an HTTP server.   Opening index.html over file:// won't ...

随机推荐

  1. 《图解HTTP》摘录

    # 图解HTTP 第 1 章 了解Web及网络基础 1.1使用http协议访问web 客户端:通过发送请求获取服务器资源的Web浏览器等. Web使用一种名为 HTTP(HyperText Trans ...

  2. 关于MQ的几件小事（三）如何保证消息不重复消费

    1.幂等性 幂等(idempotent.idempotence)是一个数学与计算机学概念,常见于抽象代数中. 在编程中一个幂等操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同.幂等函数,或 ...

  3. 【转载】C#使用is关键字检查对象是否与给定类型兼容

    在C#的编程开发过程中,很多时候涉及到数据类型的转换,如果强行转换数据类型,有时候可能会出现程序运行时错误,C#语言中提供了is关键字可以检查对象是否与给定类型兼容,可先判断类型兼容后再进行对象的转换 ...

  4. Java 之 Junit 单元测试

    Junit 单元测试 测试分类: 1.黑盒测试:不需要写代码,给输入值,看程序是否能够输出期望的值. 2.白盒测试:需要写代码.关注程序具体的执行流程. Junit 测试:(属于白盒测试) 步骤: 1 ...

  5. iOS NSNotification传递带参数的通知

    普通的通知使用 注册观察者 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(getNotificat ...

  6. 基于SpringBoot的多模块项目引入其他模块时@Autowired无法注入其他模块stereotype注解类对象的问题解决

    类似问题: 关于spring boot自动注入出现Consider defining a bean of type 'xxx' in your configuration问题解决方案 排查原因总结如下 ...

  7. 前端框架开始学习Vue(三)

    初步安装.与搭建    https://www.cnblogs.com/yanxulan/p/8978732.html ----如何搭建一个vue项目 安装 nodejs,,, npm i == np ...

  8. Android笔记（二十八） Android中图片之简单图片使用

    用户界面很大程度上决定了APP是否被用户接收,为了提供友好的界面,就需要在应用中使用图片了,Android提供了丰富的图片处理功能. 简单使用图片 使用Drawable对象 为Android应用增加了 ...

  9. c# 串行化事件

  10. window kvm 虚拟机的创建

    1:开始安装win7 (1) 上传iso文件到/data/iso文件夹中 说明:如果不存在的话, 输入 mkdir -p /data/iso (2) 开始安装 virt-install --name= ...