当我们使用vue-cli脚手架完成一个项目的时候,下一步肯定会想要怎么把这个项目放到互联网上或者本地直接打开呢,我们在本地调试的时候只要命令行执行npm run dev就可以把这个项目跑起来,但是现在我们要把他放到服务器上的话用npm run build命令就可以啦。

vue使用npm run build命令打包项目

首先
命令行执行npm run build命令,命令需要在项目目录下执行

C:\Users\John\Desktop\demo>npm run build 我的是一个在桌面叫demo的项目

出现以下提示表示打包完成:

vue使用npm run build命令打包项目

然后
我们就可以像打开静态网页一样打开我们完成的项目。

下图为打包生成的dist文件夹,其中index.html为入口文件:

vue使用npm run build命令打包项目

没错,这时你打开了index.html文件,发现网页一片空白,打开F12发现console报了几个错误,状态码为404:

vue使用npm run build命令打包项目

这是因为引用资源的路径问题,我们只要在下图的地方修改一下再打包就可以了。

需要修改的文件在项目目录下的config文件夹里的index.js文件中

vue使用npm run build命令打包项目

改完,再次执行npm run build,然后打开index.html发现sucess

vue使用npm run build命令打包项目相关推荐

  1. vue使用npm run build命令打包

    vue使用npm run build命令打包项目   当我们使用vue-cli脚手架完成一个项目的时候,下一步肯定会想要怎么把这个项目放到互联网上或者本地直接打开呢,我们在本地调试的时候只要命令行执行 ...

  2. mpvue使用vant Weapp运行npm run build命令打包后失效

    最近在使用mpvue开发微信小程序,在开发过程中使用有赞的小程序ui框架-- vant Weapp ,至于如何使用在我个人博客中有一篇关于如何使用vant Weapp ,需要的同学请点进这里自行查看. ...

  3. vue打包不生成dist文件夹(IDEA使用命令行npm run build命令打包)

    记录一下自己的愚蠢问题!!! 问题出现情况:我是使用IDEA打开的vue项目,并在IDEA的命令行(terminal)中执行vue打包命令(npm run build)的,打包结果会显示成功,但是没有 ...

  4. VSCode内npm run build编译打包时候报错:code ELIFECYCLE - (已解决)

    文章目录 win10系统使用VSCode打包项目进行build编译的时候,报错:Module build failed: Error: "extract-text-webpack-plugi ...

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

    项目开发中,前端在配置后端api域名时很困扰,常常出现: 本地开发环境: api-dev.demo.com 测试环境: api-test.demo.com 线上生产环境: api.demo.com, ...

  6. npm run build命令运行后报错 npm ERR! missing script: build

    打开vue项目中的package.json查看一下script的设置,是否如下图 如果是的话,那么运行打包命令的时候要运行 npm run build:prod --report

  7. npm run build:prod打包步骤

    1:打开.env.development 将接口地址设置成线上访问 注释本地 VUE_APP_BASE_API = '/' ENV = 'development'# 接口地址 VUE_APP_BASE ...

  8. 记一次npm run build:prod打包失败的处理方法

    报错日志: 0 info it worked if it ends with ok 1 verbose cli [ 1 verbose cli '/var/jenkins_home/tools/jen ...

  9. 【vue】npm run build打包路径问题

    直接插入主体 额不 主题 我的vue脚手架目录结构如下 有个config文件夹,在index.js中有两个方法一个开发dev,一个生产build. dev: 是我们的开发环境,资源使用绝对路径,所以可 ...

  10. 设置vue运行npm run dev时候,项目在浏览器自动打开页面的方法

    在config/index.js找到dev:{}里面的autoOpenBrowser: 设置为true,重新npm run dev一次就自动弹出浏览器页面啦!

最新文章

  1. Mac OS Terminal Commands
  2. PHP弱类型及一些绕过姿势
  3. 认知空间是什么意思_百变立体空间 搭建创意世界
  4. php与java的关系_PHP基本语法以及和Java的区别
  5. [RabbitMQ]MQ 的选择
  6. java B2B2C 源码多租户电子商城系统-Spring Cloud整合Netflix Archaius介绍
  7. 使用CImage类将RGB图像转化为灰度图像
  8. vue导入txt文本
  9. VSCode输出框中文乱码问题和修改终端字体问题
  10. 仿外卖mysql源码_进云仿美团外卖源码 v1.19
  11. 关于让PDF打开后目录的默认状态,PDF目录打开后全部折叠,PDF目录打开后全部展开
  12. 基于python的opencv图像处理对交通路口的红绿灯进行颜色检测(最简单的方法)
  13. TensorFlow系列——feature_column特征工具说明
  14. 【NOIP2013模拟联考5】小麦亩产一千八(kela) (Standard IO)
  15. Sequelize 中文API文档
  16. Dataframe一列分割成多列
  17. 贾斯特里尼布鲁克斯,葡萄酒中的天花板
  18. 2015年三分之一程总结1——工作生活总结(多图慎入)
  19. python 生成 Toeplitz 矩阵
  20. 企业选择视频会议系统

热门文章

  1. 直播平台源代码即时通讯音技术——实时语音通讯丢包补偿技术详解
  2. # android 上 mvp框架 和 agera关联
  3. C#实现自动锁屏+关屏
  4. 《心平气和一年级》读后感
  5. Android事件体系全面总结+实践分析,完整版开放下载
  6. Kotlin学习6.3:标准库中的高阶函数
  7. 2021年电工(中级)报名考试及电工(中级)实操考试视频
  8. 如何搜集外贸英文关键词
  9. 进博会召开汇聚全球商机,百度AI同传搭建沟通桥梁
  10. knife4j nacos聚合 请求文档异常