Vue项目的启动和云服务器部署

基于开源的代码，就想试着先跑起来看看，所以有了vue开源项目的启动和部署。

1.配置文件解读

在整个项目有个config文件夹，里面的index.js代表了Vuex属性的使用。这个项目用的是开发环境配置，所以启动的时候直接启动开发环境。下面是index.js的文件解读，注释可以简单看一下。直接控制台输入npm run dev，记得自己要安装node.js的环境，没有的话可以参考这里的安装node.js安装

#启动项目
npm run dev

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  //开发环境配置
  dev: {
    assetsSubDirectory: 'static', //静态资源文件夹
    assetsPublicPath: '/', //发布路径
    // 一般解决跨域请求api
    proxyTable: {
      '/': {
        target: 'http://localhost:8080/', //目标url
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/': '/'
        }
      }
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 80, // dev-server的端口号，可以自行更改
    autoOpenBrowser: false, //是否自定代开浏览器
    errorOverlay: true, //查询错误
    notifyOnErrors: true, //通知错误
    poll: false, //poll轮询，webpack为我们提供devserver是可以监控文件改动的，有些情况下却不能工作，可以设置一个轮询解决

    /**
     * Source Maps
     */
    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map', // webpack用于方便调试的配置
    cacheBusting: true, // devtool的配置当文件名插入新的hash导致清除缓存时是否生成source maps,默认为true
    cssSourceMap: true // 是否开启cssSourceMap
  },
  // 生产编译环境下的一些配置
  build: {
    // 下面是相对路径的拼接
    index: path.resolve(__dirname, '../dist/index.html'),
    // 下面定义的是静态资源的根目录 也就是dist目录
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './', // 下面定义的是静态资源的公开路径，也就是真正的引用路径

    /**
     * Source Maps
     */
    productionSourceMap: true,
    devtool: '#source-map',
    productionGzip: false, // 是否在生产环境中压缩代码，如果要压缩必须安装compression-webpack-plugin
    productionGzipExtensions: ['js', 'css'], // 定义要压缩哪些类型的文件
    bundleAnalyzerReport: process.env.npm_config_report // 是否开启打包后的分析报告
  }
}

2.部署服务器

运行build命令，然后会生成dis文件夹，然后上传到服务器自己的目录。这里需要服务器有nginx，没装过的可以参考这篇文章Nginx安装

npm run build 

配置nginx，这里我把dist文件夹放在了nginx底下的html，具体目录是这个/usr/local/nginx/html。index就是默认界面，跨域请求一定要配，否则访问不到后台接口，经过排查发现没有带端口号。没有改端口号的话，默认80就可以直接访问了。

vim /usr/local/nginx/conf/nginx.conf

location / {
    root   html/dist;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
}
# 配置跨域
location /api {
    proxy_pass http://116.205.242.163:8080/api;
}