详解关于vue2.0工程发布上线操作步骤


Posted in Javascript onSeptember 27, 2018

找了不少资料如何发布到服务器,然而还是没找到合适的可实际操作的文档。很多文档打着上线发布的标题,其实就是本地运行而已。其实vue2.0工程发布相当简单。

文章重点:

  1. 讲解vue工程配置部分的意义
  2. 如何打包为生产环境中的前端工程
  3. 如何打包发布到云端以及nginx服务器配置

一、vue工程配置部分的意义

首先我们先看下vue2.0整体工程目录结构 (非重点省略)

- vueDemo   //你的vue工程名
  - build 
    - build.js
    - check-version.js 
    - utils.js
    - vue-loader.conf.js 
    - webpack.base.conf.js 
    - webpack.dev.conf.js //这个就是针对我们开发环境所对应的webpack配置打包文件了
    - webpack.prod.conf.js //这个针对我们生产环境所对应的webpack配置打包文件了
   - config
    - dev.env.js //定义Node 开发环境配置
    - index.js  //打包dist目录结构配置
    - prod.env.js //定义Node 生产环境 
   - node_modules 
   - src 
   - static 
   - ...
   - package.json

下面我将截取package.json文件中的部分代码作解释说明:

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js"
 },

相信看过官网的都知道了,我们启动我们的vue工程使用的都是npm run dev ,这里执行的本质,其实就是使用webpack打包,所使用的配置文件,就是我上面提到的bulid目录下的 webpack.dev.conf.js。也就是我们的开发环境的执行结果了。

二、如何打包为生产环境中的前端工程

看到这里你大概想那么我所需要的生产环境需要执行什么命令呢?

下面我将一一揭晓答案,其实答案就是我package.js 中的script脚本 build /bulid.js  执行命令 npm run build 

以下为 build.js的主要内容,都是vue工程自己生成的东西

'use strict'
require('./check-versions')()

process.env.NODE_ENV = 'production'

const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')

const spinner = ora('building for production...')
spinner.start()

rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
 if (err) throw err
 webpack(webpackConfig, (err, stats) => {
  spinner.stop()
  if (err) throw err
  process.stdout.write(stats.toString({
   colors: true,
   modules: false,
   children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
   chunks: false,
   chunkModules: false
  }) + '\n\n')

  if (stats.hasErrors()) {
   console.log(chalk.red(' Build failed with errors.\n'))
   process.exit(1)
  }

  console.log(chalk.cyan(' Build complete.\n'))
  console.log(chalk.yellow(
   ' Tip: built files are meant to be served over an HTTP server.\n' +
   ' Opening index.html over file:// won\'t work.\n'
  ))
 })
})

从上面我们可以看出他其实用的就是我刚刚所解释的 webpack.prod.conf.js文件。

三、打包发布到云端以及nginx服务器配置 

通过执行这个脚本文件我们可以得到我们所需要的dist打包文件,我这边使用的是部署在阿里云的nginx服务器,只需要配置下信息,重启nginx服务器就通过你的浏览器便可以访问了。

配置代码

server
{
    listen    80;
    server_name 网址名;
    root 你的dist文件目录下文件;
    index index.html ;

    if ($request_uri = '/index.php?route=account/reg/code') {
            return 404;
        }

    error_log logs/error.log;
    access_log logs/access.log;
}

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

Javascript 相关文章推荐
javascript attachEvent和addEventListener使用方法
Mar 19 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
js实现省市联动效果的简单实例
Feb 10 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
setTimeout学习小结
Feb 08 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
JS运动改变单物体透明度的方法分析
Jan 23 Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
Sep 27 #Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 #Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 #Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 #Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 #Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 #Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 #Javascript
You might like
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
javascript tips提示框组件实现代码
2010/11/19 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
javascript实现简单页面倒计时
2021/03/02 Javascript
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
Python中input和raw_input的一点区别
2014/10/21 Python
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
django定期执行任务(实例讲解)
2017/11/03 Python
python自动12306抢票软件实现代码
2018/02/24 Python
200行python代码实现2048游戏
2019/07/17 Python
浅析Django中关于session的使用
2019/12/30 Python
详解python中的闭包
2020/09/07 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
python反扒机制的5种解决方法
2021/02/06 Python
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
团日活动策划书
2014/02/01 职场文书
一份创业计划书范文
2014/02/08 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
环保建议书200字
2014/05/14 职场文书
承诺书范本大全
2015/05/04 职场文书
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL
python实现局部图像放大
2021/11/17 Python