当你在本地直接打开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. 【转载】网站配置Https证书系列(一)：腾讯云申请免费的SSL证书的流程步骤(即https安全连接使用的证书)

    很多网站为了安全性考虑都会上https安全连接,此时就需要考虑使用SSL证书,其实在腾讯云这边提供有免费的SSL证书申请,登录腾讯云管理控制台后,进入SSL证书管理页面,里面有个申请免费证书.腾讯云申 ...

  2. vue实现组件切换的两种方式

    <!DOCTYPE html> <html> <head> <title>组件的切换</title> <meta charset=&q ...

  3. Microsoft Word (2016) Deceptive File Reference ZDI-CAN-7949

    [+] Credits: John Page (aka hyp3rlinx) [+] Website: hyp3rlinx.altervista.org[+] Source:  http://hyp3 ...

  4. PLSQL 设置 里面timestamp显示的格式

    转自: https://blog.csdn.net/dietime1943/article/details/52672813# PL/SQL下timestamp日期显示格式问题 现象: 日期检索出来显 ...

  5. C++ 基础知识汇总 持续更新

    摘录一些C++面试常考问题,写一些自己的理解,花了挺长时间的,作图是真的累,欢迎来摘果子. static关键字 用于声明静态对象: 静态函数只在本文件可见.(默认是extern的) 全局静态对象:全局 ...

  6. markdown格式字串转html格式字串

    参考:https://www.jianshu.com/p/0eff6cba1b7f 操作: 1.安装python支持包 pip install mkdocs       #  含markdown包 或 ...

  7. linux跳板机开发之trap信号机应用

    场景1:公司新招聘了一个配置管理员,他的工作是负责将公司开发人员写的新代码依次分发到办公室测试环境.IDC测试环境和正式线上环境.因此公司需要开发一个程序,当配置管理员登录服务器,只能进入分发的管理界 ...

  8. 基于CentOS构建企业镜像站

    参考:How to Setup Local HTTP Yum Repository on CentOS 7 实验环境 CentOS7 1804 步骤一:安装Nginx Web Server 最小化安装 ...

  9. WindowsPE

    什么是WindowsPE Windows Preinstallation Environment(Windows PE),Windows预引导环境,是带有有限服务的最小Win32子系统,基于以保护模式 ...

  10. 再战css

    1.盒模型的属性: 1.padding .box{ width: 200px; height: 200px; background-color: red; /*顺时针 上右下左*/ padding: ...