Vue项目搭建与线上部署

安装node.js

到 node.js 官网下载复合自己开发平台的 Node 版本

nodejs中文网

安装npm

设置下载镜像

# 修改镜像地址
npm install --registry=https://registry.npm.taobao.org
# 安装cnmp
npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org

安装webpack

# -g 参数表示全局安装
# 安装 webpack
npm install webpack -g
# 安装 webpack-cli
npm install webpack-cli -g
# 检验是否安装成功
# 查看webpack的版本号
webpack -v

安装vue

npm install vue

安装vue-cli

#全局安装vue-cli
npm install --global vue-cli
# 也是全局安装vue-cli
cnpm install vue-cli -g

vue 项目初始化

# 切换到你的项目目录(例如: /home/project)
# (OS: Linux)
cd  /home/project
# (OS: Windows)
cd \G\NodeProject
# 项目初始化(例如:项目名为demo1)
G:\NodeProject>vue init webpack demo1
# 项目名称
? Project name demo1
# 项目描述
? Project description A Vue.js project
# 项目作者
? Author zhifan <gong_zhi_fan@163.com>
# vue 构建方式
? Vue build standalone
# 安装 vue-router
? Install vue-router? Yes
# 是否需要js语法检测
? Use ESLint to lint your code? No
# 是否安装单元测试工具
? Set up unit tests No
# 是否需要端到端的测试工具
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "demo1".


# Installing project dependencies ...
# ========================

npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning ETIMEDOUT: request to https://registry.npmjs.org/chalk failed, reason: connect ETIMEDOUT 104.16.17.35:443
npm WARN registry Using stale data from https://registry.npmjs.org/ due to a request error during revalidation.
npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm ERR! cb() never called!

npm ERR! This is an error with npm itself. Please report this error at:
npm ERR!     <https://npm.community>

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\captain\AppData\Roaming\npm-cache\_logs\2020-03-12T04_10_38_779Z-debug.log

# Project initialization finished!
# ========================

To get started:

  cd demo1
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

项目运行起来

PS 1 : 关于 npm 和 cnpm 都是Node.js 的包管工具 ,但是cnpm就是国内版的npm,因此包的下载速度更快,用npm 命令的地方我们都可以用cnpm,效果是一致的

PS 2 : npm 有哪些命令我们可以通过 npm -h 查看或者通过 npm <command> -h 具体查看某个命
G:\NodeProject\demo1>npm install -h

npm install (with no args, in package dir)
npm install [<@scope>/]<pkg>
npm install [<@scope>/]<pkg>@<tag>
npm install [<@scope>/]<pkg>@<version>
npm install [<@scope>/]<pkg>@<version range>
npm install <folder>
npm install <tarball file>
npm install <tarball url>
npm install <git:// url>
npm install <github username>/<github project>

aliases: i, isntall, add
common options: [--save-prod|--save-dev|--save-optional] [--save-exact] [--no-save]

# 进入项目目录中
# 安装依赖包 (npm install 或者 cnpm install 或者 npm i) 
G:\NodeProject\demo1>cnpm i
# 启动项目
G:\NodeProject\demo1>npm run dev

> demo1@1.0.0 dev G:\NodeProject\demo1
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 13% building modules 33/37 modules 4 active ...t\demo1\src\components\HelloWorld.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting

 DONE  Compiled successfully in 3719ms                                                                                                                                             下午2:03:21

 I  Your application is running here: http://localhost:8080

安装 vue-router

npm install vue-router

安装 axios

npm install axios

安装Element UI

npm i element-ui -S

VUE项目跨域

cors 全称为 Cross Origin Resource Sharing（跨域资源共享）

跨域问题是前端项目经常遇到一般的解决方案:

开发环境: 使用webpack的 proxy

生产环境: 使用nginx做反向代理

使用场景如下:

本地开发环境的 vue项目地址是 http://127.0.0.1:8080

vue项目的很多数据都是后端接口提供的,假设后端接口地址是 http://192.168.80.90:8090

vue项目中的登陆请求在项目中的请求是 http://127.0.0.1:8080/dev-api/user/login 但是实际需要访问的后端接口是 http://192.168.80.90:8090/user/login 才能获取登陆信息,包括很多vue前端项目需要从单独的后端接口获取数据的场景

如下是一个vue项目的配置文件的关于代理部分的配置内容

 devServer: {
    proxy: {
      '/dev-api': {
       // 后端接口地址
        target: 'http://192.168.80.90:8090/',
       // 允许跨域
        changeOrigin: true,
       // 路径重写(根据自己实际情况调整)
       // 例如
       // vue 中的请求路径是 http://127.0.0.1:8080/dev-api/user/login
       // 代理后实际请求路径是 http://192.168.80.90:8090/user/login
        pathRewrite: {
          '^/dev-api': ''
        }
      }
    }
  },

VUE项目线上部署

vue 项目开发好了之后,在项目目录下执行 npm run build 命令打包, 打包好的项目一般放在vue项目的 dist文件中

dist 文件夹是打包的默认输出文件夹(可以在配置文件中配置)

通常前端开发将项目打包好之后就可以在服务器上部署了

部署的时候通常使用 Nginx 做反向代理

nginx 配置文件简单示例

vue_nginx.conf

server{
  # 监听的端口
  listen 19000;
  # 使用域名,没有域名使用 _ 标识
  server_name _;  
  # 项目根路径
  root  /var/wwwroot/rms2/dist;  
  location / {
    # http_core核心模块所带的指令，主要是能替代一些rewrite的指令，提高解析效率
    try_files $uri $uri/  /index.html;   
  }
  location /prod-api {
    # 重写 break表示重写之后会停止后续的重写规则
    # 例如 : 
    # 看到前端请求是 http://192.168.10.90:19000/pro-api/user/login
    # 重写后的请求是 http://192.168.10.90:19000/user/login
    rewrite "^/prod-api/(.*)$" /$1 break; 
    # proxy_pass 反向代理
    # 此处的作用是vue前端项目中需要访问的实际后端接口地址
    # 例如 : 
    # 前端的请求 http://192.168.10.90:19000/pro-api/user/login
    # 实际后端接口请求 http://200.100.10.1:8080/user/login
    proxy_pass http://200.100.10.1:8080;
  }
}

参考

- [1] VUE文档

- [2] Eelment UI 文档

- [3] axios 文档

- [4] Vue Router 文档

- [5] CORS

- [6] webpack文档

- [7] Nginx文档

- [8] try_files

- [9] node.js官网