Vue2.0如何发布项目实战

 更新时间:2017年07月27日 09:27:48   作者:陈楠酒肆  
本篇文章主要介绍了Vue2.0如何发布项目实战,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

一、创建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 目录丢到服务器就可以了,是不是很简单。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Vue3子组件watch无法监听父组件传递的属性值的解决方法

    Vue3子组件watch无法监听父组件传递的属性值的解决方法

    这篇文章主要介绍了Vue3子组件watch无法监听父组件传递的属性值的解决方法,文中通过代码示例讲解的讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-10-10
  • vue3在table里使用elementUI的form表单验证的示例代码

    vue3在table里使用elementUI的form表单验证的示例代码

    这篇文章主要介绍了vue3在table里使用elementUI的form表单验证的示例代码,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-12-12
  • vue draggable组件实现拖拽及点击无效问题的解决

    vue draggable组件实现拖拽及点击无效问题的解决

    这篇文章主要介绍了vue draggable组件实现拖拽及点击无效问题的解决,只需要在设置handle属性就可以了,.defaultTypeTag 是要拖拽的块的类名,要注意的是需要做点击事件的项不能包含在这个类名里面,不然会无法触发点击事件,详细解决办法跟随小编一起学习吧
    2022-05-05
  • 最细致的vue.js基础语法 值得收藏!

    最细致的vue.js基础语法 值得收藏!

    这篇文章主要为大家推荐了一篇值得收藏和学习的vue.js最细致的基础语法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • vue3在自定义hooks中使用useRouter报错的解决方案

    vue3在自定义hooks中使用useRouter报错的解决方案

    这篇文章主要介绍了vue3在自定义hooks中使用useRouter报错的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue使用Ref跨层级获取组件的步骤

    Vue使用Ref跨层级获取组件的步骤

    这篇文章主要介绍了Vue使用Ref跨层级获取组件的步骤,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-01-01
  • Vue 3.0 项目创建过程及解决方案

    Vue 3.0 项目创建过程及解决方案

    这篇文章主要介绍了Vue 3.0 项目创建过程,首先要确保电脑上已安装node.js,确保已安装 Vue CLI,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2024-04-04
  • vue-router中关于meta的作用及说明

    vue-router中关于meta的作用及说明

    这篇文章主要介绍了vue-router中关于meta的作用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue中的base64图片转网络URL方式

    vue中的base64图片转网络URL方式

    在Vue中,可以直接将Base64编码的图片赋值给img元素的src属性,此外,也可以通过JavaScript的URL.createObjectURL()方法将Base64转换为Blob URL,进而转换为File对象,并可进一步转换为PNG或其他格式的图片,这种转换技术在前端开发中非常实用
    2024-10-10
  • vue 2 实现自定义组件一到多个v-model双向数据绑定的方法(最新推荐)

    vue 2 实现自定义组件一到多个v-model双向数据绑定的方法(最新推荐)

    有时候我们需要对一个组件绑定自定义 v-model,以更方便地实现双向数据,例如自定义表单输入控件,这篇文章主要介绍了vue 2 实现自定义组件一到多个v-model双向数据绑定的方法,需要的朋友可以参考下
    2024-07-07

最新评论