1.前端框架一般依赖node.js,我们首先要安装node.js.请参考:

http://www.cnblogs.com/wuac/p/6381819.html

to:安装好node.js后npm也安装OK了 , 自己在设置一下环境变量路径配置 自行百度。。

查看node版本命令:node -v

查看npm版本命令: npm -v

2.npm 的源都在国外的地址,安装起来特别慢,这里利用淘宝的镜像服务器。

安装命令为:npm install -g cnpm --registry=https://registry.npm.taobao.org

3.接着安装全局的vue-cli脚手架,用于帮助你快速搭建所需的Vue的开发模板框架
$ cnpm install -g vue-cli回车,等待安装,安装完成后,可以输入vue -V 然后回车,如果出现vue客户端版本号,则说明成功的安装

查看vue版本命令:vue -V  ,注意是大写的 V

4.用npm安装webpack
安装命令:cnpm install webpack -g         

webpack已经安装到了全局环境下,可以通过命令webpack -h试试.

5.在一个目录下新建一个文件夹,cd到该目录下,然后输入命令: vue init webpack vue-test //(项目名称:vue-test) 创建一个vue项目

6.启动命令:cnpm run dev 

以上表示新建vue项目运行成功

 

7.打包vue项目
打包命令:npm run build 执行打包

8.打包成功后项目下生成了一个dist文件夹 ,( dist文件夹下的文件)

9.iis部署dist文件夹,端口自己设置

浏览器敲localhost:8039

到此表示本地iis服务器部署vue.js成功

2:部署在nginx服务器上

1.把打包好的dist文件夹拷贝到安装nginx里的html文件夹下

2.修改  nginx.conf 配置文件 (1:修改一下端口。需要注意不要使用nginx默认的80端口,这个端口一般都被计算机其它程序占用了, 2:修改目录)

3.运行nginx服务器,  cd 到nginx里的安装目录 ,  输入启动命令:start  nginx.exe

打开浏览器输入地址与端口,显示运行成功

至此,vue.js分别部署iis服务器与nginx服务器成功。

本文参考文章:https://www.jianshu.com/p/4cde96b538e6?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

win10系统本地iis或nginx服务器部署vue.js项目的更多相关文章

  1. 阿里云ECS服务器部署Node.js项目全过程详解

    本文详细介绍如何部署NodeJS项目到阿里云ECS上,以及本人在部署过程中所遇到的问题.坑点和解决办法,可以说是全网最全最详细的教程了.同时讲解了如何申请阿里云免费SSL证书,以及一台ECS服务器配置 ...

  2. Nginx服务器部署 负载均衡 反向代理

    Nginx服务器部署负载均衡反向代理 LVS Nginx HAProxy的优缺点 三种负载均衡器的优缺点说明如下: LVS的优点: 1.抗负载能力强.工作在第4层仅作分发之用,没有流量的产生,这个特点 ...

  3. vue-小爱ADMIN系列文章(二):微信微博等分享,国际化,前端性能优化,nginx服务器部署

    最近在做我的小爱ADMIN后台管理系统,结合当前市场后台管理系统对相关功能的需求,我又开始新增了一些新的功能和组件,如分享功能组件,项目国际化功能:项目完成后,部署在nginx服务器,发现首次访问的速 ...

  4. 在nginx上部署vue项目(history模式);

    在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...

  5. 在nginx上部署vue项目(history模式)--demo实列;

    在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...

  6. Spring框架学习笔记(6)——阿里云服务器部署Spring Boot项目(jar包)

    最近接外包,需要部署服务器,便是参考了网上的几篇博文,成功在阿里云服务器成功部署了Spring Boot项目,特记下本篇笔记 Spring Boot项目打包 这里说一下部署的一些问题 1.mysql驱 ...

  7. nginx代理部署Vue与React项目

    nginx代理部署Vue与React项目 一,介绍与需求 1.1,介绍 Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务.Nginx是由 ...

  8. 如何把vue.js项目部署到服务器上

    如何把vue.js项目部署到服务器上面,我用的是tomcat服务器 1-改一下config/index.js文件,如下图,把assetsPublicPath: './', productionSour ...

  9. 如何线上部署node.js项目

    来源:http://blog.csdn.net/chenlinIT/article/details/73343793 前言 最近工作不是很忙,在空闲时间学习用node+express搭建自己的个人博客 ...

随机推荐

  1. Spring Cloud Netflix之Euraka Server注册中心

    Spring Cloud简介 Spring Cloud是基于Spring Boot的一套实现微服务架构的生态组件.生态组件中包含Spring Cloud NetFlix,Spring Cloud Fe ...

  2. python开发微信公众号SDK选择

    1.wechat-sdk sudo pip install wechat-sdk 文档地址:  http://ww2.wechat-python-sdk.com/ 2.wechat sudo pip ...

  3. 201871010121 王方 《面向对象程序设计(Java)》第6-7周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  4. python中判断两个对象是否相等

    #coding=utf-8#比较两个对象是否相等#python 2中使用cmp(),==,is#is 主要是判断 2 个变量是否引用的是同一个对象,如果是的话,则返回 true,否则返回 false. ...

  5. 创建vector<T>容器

    vector<T> 容器是包含 T 类型元素的序列容器,和 array<T,N> 容器相似,不同的是 vector<T> 容器的大小可以自动增长,从而可以包含任意数 ...

  6. CSS/H5保留显示 textarea输入的空格和换行

    .show { white-space: pre-wrap; }

  7. [LeetCode] 187. Repeated DNA Sequences 求重复的DNA序列

    All DNA is composed of a series of nucleotides abbreviated as A, C, G, and T, for example: "ACG ...

  8. C#原型模式(深拷贝、浅拷贝)

    原型模式就是用于创建重复的对象,当想要创建一个新的对象但是开销比较大或者想将对象的当前状态保存下来的时候,我们就可以使用原型模式. 创建原型 public abstract class Base { ...

  9. SQL-----数据库三种删除方式详解

    第一种  使用delete  语句 特点: delete 属于数据库操纵语言DML,表示删除表中的数据, 删除过程是每次从表中删除一行,并把该行删除操作作为事务记录在日志中保存 可以配合事件(tran ...

  10. Unsafe例子

    Java和C++语言的一个重要区别就是Java中我们无法直接操作一块内存区域,不能像C++中那样可以自己申请内存和释放内存.Java中的Unsafe类为我们提供了类似C++手动管理内存的能力,不建议使 ...