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

 

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

首先

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

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

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

然后

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

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

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

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

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

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

demo

完。

vue使用npm run build命令打包的更多相关文章

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

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

  2. Vue -- vue-cli(vue脚手架) npm run build打包优化

    这段时间公司新项目立项,开发组选用 Vue2.0 进行开发.当然也就一并用到 vue cli 进行自动化构建.结果在基础版本开发完成后,用 npm run build 命令打包上线时,发现以下几个问题 ...

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

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

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

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

  5. VUE项目 npm run build卡住不动,也不报错

    npm config set registry http://registry.cnpmjs.org try again npm run build 居然能动了....

  6. Vue中npm run build报“Error in parsing SVG: Unquoted attribute value”

    自己做的一个Vue项目,在打包时老是报这个错误 # Error in parsing SVG: Unquoted attribute value 查了查网上说的,都说报错原因是压缩和抽离CSS的插件中 ...

  7. 在vue项目npm run build后,index.html中引入css和js 报MIME type问题

    问题: 1.在vue项目中,build打包后,index页面打开会报错, MIME type ('text/html') ;报错内容:because its MIME type ('text/html ...

  8. vue 使用 npm run dev命令后 自动打开浏览器

    1.使用vue-cli 老版本构建项目时, 可修改config文件夹下index.js文件 autoOpenBrowser 属性给为 true 即可 使用vue-cli 3.x 版本后,所有的配置项均 ...

  9. Electron 桌面应用打包(npm run build)简述(windows + mac)

    最近一段时间在用electron+vue做内部项目的一键构建发布系统的桌面应用,现就其中打包流程写个备注,以示记录. Windows环境打包:1.首先贴一下package.json. { " ...

随机推荐

  1. 原来样式改变不了(input type="file")

    label { background-color: #979fa8; color: #fff; display: inline-block; padding: .8rem 4rem; cursor: ...

  2. React 万能的函数表达式

    一.语法简介 表达式可以以下两种方法, (1)(function A(){})(this),(this)参数在函数外面 (2)(function B(){}(this)),(this)参数在函数里面 ...

  3. cocos2dx开发笔记

    1.帧动画:SpriteTest=>SpriteAnimationSplit 2.sourceinsight显示代码行 option->document option->editin ...

  4. asp.net动态设置button的Text,Enabled属性,向后台传递参数

    前台代码:根据后台传递过来的参数动态设置 <asp:Button ID="Button1" runat="server" CommandArgument= ...

  5. Android Matrix类以及ColorMatri

    引自:http://www.chinabaike.com/t/37396/2014/0624/2556217.html Android Matrix类以及ColorMatrix类详解 最近在系统学习了 ...

  6. BBS的登陆——发帖——回帖

    整体分析思路 1.首先手工熟悉一遍业务流程 2.录制脚本,选取协议,设置录制选项 1)Run-Time-Settings——Preferences——Options设置3个超时 2)Recording ...

  7. 线程(Thread、ThreadPool)

    多线程的操作,推荐使用线程池线程而非新建线程.因为就算只是单纯的新建一个线程,这个线程什么事情也不做,都大约需要1M的内存空间来存储执行上下文数据结构,并且线程的创建与回收也需要消耗资源,耗费时间.而 ...

  8. mysql执行 sql文件遇到USING BTREE ) ENGINE=MyISAM DEFAULT CHARSET=utf8错误

    使用navcat在导入别人发的mysql数据的时候,报了下面这个错误: [Err] 1064 - You have an error in your SQL syntax; check the man ...

  9. Ubuntu 14.10 下Spark on yarn安装

    1 服务器分布 服务器 说明 192.168.1.100 NameNode 192.168.1.101 DataNode 192.168.1.102 DataNode 2 软件环境 2.1 安装JDK ...

  10. Java之多线程 Atomic(原子的)

    一.何谓Atomic? Atomic一词跟原子有点关系,后者曾被人认为是最小物质的单位.计算机中的Atomic是指不能分割成若干部分的意思.如果一段代码被认为是Atomic,则表示这段代码在执行过程中 ...