node.js+npm+vue+webpack+nginx前端项目打包部署到服务器

版权声明:一枚程序员的告白 https://blog.csdn.net/qq_35813265/article/details/81872351

本文主要介绍vue+webpack打包部署到nginx服务器。因为可以需要依赖node.js,所有需要先安装node.js,步骤如下

1.首先先去下载node.js,点击查看下载安装步骤http://www.cnblogs.com/wuac/p/6381819.html,本主要介绍在window下的操作,所以别忘了将node.js和npm加入到环境变量下。npm是我们要用到的包管理工具,一会vue需要用到npm命令。

2.由于许多npm的源都是在国外的地址,用npm安装vue和webpack特别慢,所以我们这里利用淘宝的镜像服务器。

执行命令为:

npm install -g cnpm --registry=https://registry.npm.taobao.org

  然后回车等待命令结束。

3.接着安装全局的vue-cli脚手架,用于帮助搭建所需的Vue的开发模板框架

命令为:

cnpm install -g vue-cli

回车,等待安装

安装完后,可以输入:

vue -V

然后回车,如果出现vue的客户端版本信息,则说明安装成功了。

4.用 npm 安装 Webpack,

命令为:

cnpm install webpack -g

此时 Webpack 已经安装到了全局环境下,可以通过命令行 webpack -h 试试。

5.在一个目录下新建一个vuepro文件夹,cd到该目录下,然后输入命令:

vue init webpack vue-test

(项目默认的名称),此时,观察vuepro的文件夹下又多了一个vue-test文件夹,这个就是vue的模版项目。

6.启动调试,顺序输入以下命令:

cd vue-test
cnpm install(这里需要等待)
npm run dev(这个是debug部署命令)

出现端口,则表示启动成功,端口监听的就是所显示的端口号,此端口号,可以在vue-test/config/index.js文件里修改。

7.至此,开发环境就搭建好了,在浏览器访问http://localhost:8080(这个端口号,是上面第6步你配置的端口号),就可以显示vue的页面了,

现在假设你在vue下开发好了前端页面,现在开始打包部署到服务器上,先在路径vue-test下输入命令:

npm run build
编译完成后会发现在vue-test文件夹下多出一个dist文件夹这里面就是编译好的文件了。
2、网上下载nginx,下载地址http://nginx.org/en/download.html,解压下载的nginx文件。
3、配置部署,编辑nginx/conf 下的nginx.conf,修改如下图:

 

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试