美文网首页Vue.jsVue.js专区
五、Vue2.0如何发布项目

五、Vue2.0如何发布项目

作者: 陈楠酒肆 | 来源:发表于2017-07-20 14:56 被阅读213次

大家好,这节我们主要讲解项目的发布,其实很简单,没有大家想的那么复杂,具体如下操作。

一、创建VUE项目

首先我们需要创建VUE项目,创建项目的代码如下:

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev

项目截图如下:


项目截图

二、项目打包

在打包之前需要修改一个地方,那就是config->index.js文件,修改assetsPublicPath: '/'为assetsPublicPath: './',截图如下:

index.js文件
//上面文件改好后,开始打包,执行如下命令:
npm run build
打包后的截图

打包后,项目目录下会生成dist文件夹,这就是我们的整体项目。如图所示:

dist文件夹

三、发布

最后一步就简单了,直接把 dist 目录丢到服务器就可以了,是不是很简单。如果有不明白的朋友,可以加我们QQ群,我们进一步探讨,欢迎大牛拍砖。
为了更好的服务大家,请加入我们的技术交流群:(511387930),同时您也可以扫描下方的二维码关注我们的公众号,每天我们都会分享经验,谢谢大家。

相关文章

  • 五、Vue2.0如何发布项目

    大家好,这节我们主要讲解项目的发布,其实很简单,没有大家想的那么复杂,具体如下操作。 一、创建VUE项目 首先我们...

  • vue-cli构建vue项目-前端完美开发环境搭建

    参考资料: Vue2.0 新手完全填坑攻略—从环境搭建到发布 vue-cli构建vue项目Webpack 入门...

  • vue-cli构建vue项目

    vue-cli构建vue项目 参考资料:Vue2.0 新手完全填坑攻略—从环境搭建到发布 1.Node.js安装 ...

  • Vue2.0 环境搭建到运行

    Vue2.0 从环境搭建到发布 1 Vue2.0 推荐开发环境 1.1 Node.js 1.1.1 Node.js...

  • ckeditor-vue2.0 接入富文本框

    主题 ckeditor5.0 如何在vue2.0 项目中接入 安装 注意: ckeditor5-vue 支持的是v...

  • highlight.js 代码高亮

    如何在VUE2.0项目里使用highlight 1.highlight 10.*版本的 按需引入高亮代码后缀ind...

  • vue2单页面应用学习

    前言 最近开始学习vue2.0,但看完后完全不知道要如何开始一个项目,网上找了半天也没找到个如何一步步搭建项目出来...

  • Maven发布项目到tomcat

    Maven发布项目到tomcat 本文介绍如何通过Maven将项目发布到tomcat服务器中,包含发布到本地机和远...

  • 部署到外置tomcat中(五)

    多模块项目中已经可以发布到本地tomcat中运行项目,所以,这一章就尝试,如何把单独的springboot项目发布...

  • weex优秀案例

    # toutiao -weex > 基于WEEX +Vue2.0仿照今日头条的app项目(android/ios)...

网友评论

    本文标题:五、Vue2.0如何发布项目

    本文链接:https://www.haomeiwen.com/subject/ypodkxtx.html