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. JavaWeb项目 IDEA+Tomcat+Nginx 部署流程

    转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/11375100.html 一:IDEA Maven项目打包 1.修改打包方式 在maven项目的pom文件中, ...

  2. c# 第9节 数据类型之值类型

    本节内容: 1:数据类型是什么 1:数据类型是什么 2:数据类型--值类型 3:值类型和引用类型的区分 画图现象: 3:值类型的种类 整数: 浮点数: 字符:

  3. 1.python进行if条件相等时候的条件

    在我们进行 if == 判断的时候!其中判断的条件: 1:其值是不是一样 3:其类型是否是一样 ###二者少了任何一个都不可以 >>> pwd = 23>>> cc ...

  4. mysql的创建数据库表及添加数据

    C:\Users\ceshi>mysql -u root -pEnter password: ******Welcome to the MySQL monitor. Commands end w ...

  5. CentOS 8 网卡命令

    nmcli n 查看nmcli状态 nmcli n on 启动nmcli nmcli c  up eth0 启动网卡eth0 nmcli c down eth0 关闭网卡eth0 nmcli d c ...

  6. github新建本地仓库并将代码提交到远程仓库

    方式一: 在github上新建好仓库:gitTest 使用命令git clone git@github.com:yourgithubID/gitTest.git,克隆到本地相应的位置 将要上传的工程代 ...

  7. 洛谷 P5461 赦免战俘

    洛谷 P5461 赦免战俘 传送门 思路 洛谷7月月赛第一题 着实是一道大水题,然后我月赛的时候没做出来...... 就是一道大模拟题呀,直接dfs就好了,我是反着处理的,所以最后要输出\(1-a[i ...

  8. [LeetCode] 727. Minimum Window Subsequence 最小窗口序列

    Given strings S and T, find the minimum (contiguous) substring W of S, so that T is a subsequence of ...

  9. [LeetCode] 367. Valid Perfect Square 检验完全平方数

    Given a positive integer num, write a function which returns True if num is a perfect square else Fa ...

  10. JDK8过渡到JDK11

    module-info 首先最大的难度就是module-info.java Java9 手把手教你实现模块化 后续我再找点详细的资料 中文API文档 其次是中文文档[感谢 译者wzjin https: ...