vue打包npm run build时候界面报错的解决

用coding-pages打开后显示Failed to load resource: the server responded with a status of 404 (Not Found)，

解决方案：

方案一：

找到config里的index.js,打开修改assetsPublicPath 为“./”

方案二：

或者把index.html文件中的路径/去掉；

下面是去掉后的，可以参考下

成功了！

补充知识：启动vue项目 npm run dev 时报errno -4058

进入到项目目录下，shift+右键 打开cmd

执行 npm install

然后再执行 npm run dev

或者你留意一下项目是不是存在多个文件夹。你执行npm run dev时，没有在最里面的文件夹（即包含package.json文件夹内）执行

以上这篇vue打包npm run build时候界面报错的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决Vue-cli npm run build生产环境打包,本地不能打开的问题

    问题: Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work. 解释: npm run dev是开发环境, npm run build是生产环境, 在开发环境完成代码和测试, 之后用生产环境生成代码,执行npm run build 命令后,会生成dist目录,里边包含index.html和static文件夹. npm run build的时候,

  • 基于vue如何发布一个npm包的方法步骤

    前言:工作的时候总是使用别人的npm包,然而我有时心底会好奇自己如何发布一个npm包呢,什么时候自己的包能够被很多人喜欢并使用呢...今天我终于迈出了第一步. 前提:会使用 npm,有 vue 基础,了解一点 webpack Are you ready? Go! 一.编写自己的npm包 1. 新建一个空文件夹 2. 进入文件夹,终端(cmd)运行 npm init 完成后会在目录下生成一个 package.json 文件 我们可以根据自己的需要补充文件内容 这是我的: { "name"

  • 使用Vue-cli3.0创建的项目 如何发布npm包

    在使用vue进行项目开发时,如果我们想要发布一个包,有时候会有点迷糊,不知道应该怎么修改脚手架的默认设置.这里记录一下一些常见的操作. 创建index.js进行模块的导出 将我们需要导出的组件在index.js文件中进行统一导出,可能之前需要进行处理,是先进行全局注册Vue.component,还是用户自己注册. import App from './App.vue' export default App; 修改vue.config.js配置文件 修改publicPath的路径为相对路径 mod

  • vue中npm包全局安装和局部安装过程

    全局安装是将npm包安装在你的node安装目录下的node_modules文件夹中.在windows和mac中,全局安装的默认路径是不同的.在mac中默认是安装到 /usr/locla/lib 中.在windows默认安装目录是 C:\Program Files\nodejs ,当然你也可以通过一下命令来查看全局安装路径. // 查看全局安装路径 npm root -g // 查看npm的基础设置 npm config ls // 查看安装目录路径 npm config get prefix 全

  • 如何构建一个Vue插件并生成npm包

    vue的插件一般用来添加全局性的功能,具体可分为: 添加全局方法或者属性: 添加全局资源(指令.过滤器等): 通过全局 mixin 方法添加一些组件选项: 在 Vue.prototype 上 添加 Vue 实例方法: 创建一个库,提供自己的 API,同时提供上面提到的一个或多个功能: 一般来说我们在项目中倾向于第五种方式,可以通过创建一个js文件包含我们需要添加的多种全局性功能,指令.过滤器.实例方法之类的.这样的一个插件的构建也不难,主要就是使用vue提供的install 方法,传入Vue构造

  • vue中Npm run build 根据环境传递参数方法来打包不同域名

    项目开发中,前端在配置后端api域名时很困扰,常常出现: 本地开发环境: api-dev.demo.com 测试环境: api-test.demo.com 线上生产环境: api.demo.com, 这次是在Vue.js项目中打包,教大家个方法: 使用 npm run build -- xxx   ,根据传递参数xxx来判定不同的环境,给出不同的域名配置. 1.项目中/config/dev.env.js修改: 新增:HOST: '"dev"' 'use strict' const me

  • 详解如何制作并发布一个vue的组件的npm包

    前提:1.会vue基础,以及vue的组件(官网:https://cn.vuejs.org/v2/guide/components.html)相关的基础. 因为本文主要是讲如何把一个vue组件做成npm包并发布. 分为2大步骤: 一.按照相应格式写我们的vue代码(就如同写一个jquery插件时.有其固定的格式一样). 二.发布到npm上的流程 一.书写一个vue组件 不用脚手架,我们自己从头开始做起,因为脚手架会附带很多没用的东西. 就做一个最简单的vue组件:就是传入用户名字,页面打印出'he

  • 基于Vue的文字跑马灯组件(npm 组件包)

    基于Vue的文字跑马灯组件(npm 组件包)

    一.前言 总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的'marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了'marquee'标签 既然HTML标准已经废弃了这个标签,现在工作上用的是Vue,所以想着能不能自己也发布一个基于Vue的文字跑马灯组件包,这样别人可以通过npm install ...就可以用,想想还有点激动,于是开始我的第一个npm组件之旅! 二.用npm发布一个包 有点惭愧,之前通过npm install ...安装pac

  • Vue.js构建你的第一个包并在NPM上发布的方法步骤

    Vue.js构建你的第一个包并在NPM上发布的方法步骤

    本文我们将学习如何制作一个vue插件,并将其分发到npm上,能够让其他人安装使用. 插件大大地提高了开发者的开发效率.我们的大多数项目都依赖于它们,因为它们能够以极快的速度发布新功能. 正如官方Vue.js文档中所述,插件的范围没有限制.通常我们想实现的功能有下面5种: 添加全局方法或者属性 (如: vue-custom-element) 添加全局资源:指令/过滤器/过渡等 (如:vue-touch) 通过全局 mixin 方法添加一些组件选项 (如:vue-router) 添加 Vue 实例方

  • 自定义Vue组件打包、发布到npm及使用教程

    本文将帮助:将自己写的Vue组件打包到npm进行代码托管,以及正常发布之后如何使用自己的组件. 本文讲述的仅仅是最基础的实现,其他复杂的操作需要非常熟悉webpack的相关知识,作者将继续学习. 按照大佬文中写的一步步操作,够细心的话基本可以一步到位.下面总结一下发布步骤: 1. 利用Vue的脚手架新建一个简易版的Vue项目my-project: vue init webpack-simple my-project -> cd my-project -> npm i -> npm run

随机推荐