Vue-项目从本地搭建到线上部署(wǒ shì biaō tí dǎng)

2019-05-17 admin

作者:gauseen

  • 简介:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,易用、灵活、高效。
  • 生态系统
# 安装 vue cli
yarn global add @vue/cli

# 初始化项目
vue create hello-world-3x

cd hello-world-3x

# 本地运行项目
yarn serve

静态资源可以通过两种方式进行处理:

  • JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。

  • 放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝,而不会经过 webpack 的处理。

  • URL 转换规则

    • 如果 URL 是一个绝对路径 (例如 /images/foo.png),它将会被保留不变。
    • 如果 URL. 开头,它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。
    • 如果 URL~ 开头,其后的任何内容都会作为一个模块请求被解析。这意味着你甚至可以引用 Node 模块中的资源:
    • 如果 URL@ 开头,它也会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向 <projectRoot>/src 的别名 @
  • 任何放置在 public 文件夹的静态资源都会被复制到 outputDir 对应值的目录下(默认 'dist')。

  • 如果用绝对路径来引用,不会被 webpack 处理(资源只存在 1 份);

  • 如果用相对路径来引用,会被 webpack 处理,将图片重新打包到 <outputDir>/<assetsDir>/img/ 目录下,并给图片加 hash 值,以便更好的控制缓存。资源会存在 2 份(还有第一条复制的 1 份)

  • 所以引用 public 文件夹的静态资源建议使用绝对路径,注意配置路径 publicPath 前缀

<img :src="`${publicPath}logo.png`">
data () {
  return {
    publicPath: process.env.BASE_URL,
  }
},

<font style=“color: #ff9966;”> 注:有些 webpack 选项是基于 vue.config.js 中的值设置的,所以不能直接修改。如:你应该修改 vue.config.js 中的 publicPath 选项而不是修改 output.publicPath </font>

  • publicPath(同 baseUrl, vue cli 3.3 弃用)

    作用:设置所有经过 webpack 处理的静态资源路径前缀(不包括用绝对路径引用的资源)

    默认:'/'

    默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,如:https://domain.com,publicPath 不需要刻意设置。 如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径,如:https://domain.com/my-app/,那么 publicPath/my-app/

  • webpack 配置 vue cli 内部配置,是通过 webpack-chain 维护的,使 webpack 的配置在后期修改起来更方便、简单。

    对于 CSS 相关 loader 来说,我们推荐使用 css.loaderOptions 而不是直接链式指定 loader。这是因为每种 CSS 文件类型都有多个规则,而 css.loaderOptions 可以确保你通过一个地方影响所有的规则

// vue.config.js

// CSS loader 相关配置
css: {
  loaderOptions: {
    stylus: {},
  },
},

// webpack 其它配置
chainWebpack: config => {
    // 配置别名
    config.resolve.alias
      .set('rootDir', path.join(__dirname))
    config.module
    // 添加一个具名规则 方便后期修改
      .rule('compile')
        .test(/\.js$/)
        .include
          .add('src')
          .end()
        // 甚至可以创建具名 loader,方便后期修改
        .use('babel')
        .loader('babel-loader')
        .options({
          presets: [
            ['@babel/preset-env', { modules: false }]
          ]
        })

    // 修改具名 loader
    config.module
      .rule('compile')
        .use('babel')
          .tap(options => newOptions)
vue inspect > output.js # 输出开发模式下 webpack 配置信息
vue inspect --mode production > output.js # 输出生产模式下 webpack 配置信息

场景:有 development、test、preview、production 多种线上环境,每个环境用到的变量值都不同,该怎么用程序解决?

vue-cli 3.x 支持多种环境模式变量配置

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入,但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入,但会被 git 忽略

环境变量优先级:环境变量的文件名 . 越多优先级越高。如:.env.production > .env

默认情况下 vue-cli 3.x 只支持 3 种模式,分别为:

  • development 模式用于 vue-cli-service serve
  • production 模式用于 vue-cli-service build
  • test 模式用于 vue-cli-service test:unit 和 vue-cli-service test:e2e

那如何新加模式呢?

可以通过传递 --mode 选项参数为命令行 vue-cli-service 指定具体环境模式。如:新加 preview 模式

  • 项目根目录新增 .env.preview 文件,因为每个模式默认都会将 NODE_ENV 的值设置为模式的名称,所以要添加 NODE_ENV=production 变量(preview 模式也是需要打包上传服务器的)。

  • package.json scripts 文件新增脚本命令

    "build:preview": "vue-cli-service build --mode preview"
    
  • 运行 yarn build:preview 打包编译即可

前后端分离式开发已经很常见了,为了前后端并行开发,mock 数据(造假数据) 已经是个不可避免的问题。 对前端来说 mock 数据的方式有很多种:

  • Mock.js 模拟数据生成器

    • 需要前端手动去写 mock 数据代码,比较麻烦
    • 每个项目都要有一套 mock 代码,复用率底
    • 没有 GUI 可视化界面,不方便后端开发查看接口、字段等 api 信息
  • easy-mock 是一个可视化,并且能快速生成模拟数据的持久化服务

    • 支持可视化界面
    • 支持协同编辑
    • 支持 swagger,可基于 swagger 快速创建项目接口
    • 支持 Mock.js 语法
    • 支持接口预览,等等
    • 免费开源,私有化部署简单
  • RAPRAP2 阿里妈妈出品,开源接口管理工具 RAP 第一代和二代

    • 支持可视化界面
    • 支持协同编辑
    • 支持 Mock.js 语法
    • 不支持 swagger 数据导入,但支持 JSON 格式数据的导入导出
    • 免费开源,但私有化部署相对繁琐
  • YApi 是一个可本地部署的、打通前后端及 QA 的、可视化的接口管理平台

    • 支持可视化界面
    • 支持协同编辑
    • 支持自动化测试, 对 Response 断言
    • 基于 Json5Mockjs 定义接口返回数据的结构和文档
    • 支持 swagger、postman、json、har 数据导入
    • 免费开源,私有化部署简单
// vue.config.js

// 基础地址
const baseApi = '/api'
// YApi 项目 ID (YApi 创建项目所得)
const mockProjectId = '66666'

module.exports = {
  // 代理
  devServer: {
    proxy: {
      // 开发环境代理
      [`${baseApi}/(?!mock)`]: {
        target: process.env.VUE_APP_DOMAIN || 'http://test.domain.com', // 测试环境
        changeOrigin: true,
      },
      // mock 数据代理
      [`${baseApi}/mock`]: {
        target: 'http://yapi.demo.qunar.com',
        changeOrigin: true,
        pathRewrite: {
          [`${baseApi}/mock`]: `/mock/${mockProjectId}${baseApi}`,
        },
      },
    },
  },
}

http-server 是一个基于 node,零配置命令行 http 服务器。

# 安装
yarn add -D http-server

# 配置 package.json scripts
"scripts": {
  "preview": "http-server ./ -P",
},

# 打包产出
yarn build

# 修改文件名 dist/ ===> my-app/(与 publicPath 保持一致)
mv -rf dist/ my-app/

# 本地预览(http://ip:port 可选, 为代理服务)
yarn preview <http://ip:port>

# 浏览器打开连接访问即可

这里主要讲述前后端分离式线上部署

当前应用路由模式分2种,hashhistory 模式

  • hash 模式

    • 样式比较丑,不太符合人的 “审美”
    • 浏览器地址栏 URL# (如:http://localhost:3000/#/a)
    • # 后面的内容不会传给服务端
    • 改变浏览器地址栏 URL # 后面的值,不会引起网页重载
  • history 模式

    • HTML5 新特性,样式比较优雅
    • 浏览器地址没有 # (如:http://localhost:3000/a)
    • 没有 # ,所有 domain 后面的内容都会传给服务端
    • 改变浏览器地址栏 URL 网页重载,再次请求服务器,并向 history 栈中插入一条记录

具体区别看这里

前端页面需要跑在 web 服务器里面,主要包括 Nginx,Apache,IIS 等,主要处理一些静态资源。我们公司使用 Nginx,下面介绍前端应用部署时 Nginx 的一些配置:

location ^~ /pos2/
{
  root /data/www/webproject;
  index  index.html index.htm;
}
location ^~ /crmwap/
{
  root /data/www/webproject;
  try_files $uri $uri/ /crmwap/index.html =404;

  # 已知: $document_root = root = /data/www/webproject

  # 若: try_files $uri $uri/ /crmwap/index.html =404; fall back 如下:
  # $document_root$uri --> $document_root$uri/ -->  $document_root/crmwap/index.html --> nginx 404

  # 若:try_files $uri $uri/ /crmwap/index.html; fall back 如下:
  # $document_root$uri --> $document_root$uri/ --> http://domain.com/crmwap/index.html
}

Nginx 常用命令

# 启动
start nginx

# 重启
nginx -s reload

# 关闭
nginx -s stop

注:try_files 的最后一个位置(fall back)是特殊的(仅限 root),它会发出一个内部 “子请求” 而非直接在文件系统里查找这个文件。 在不更改 Nginx 配置文件的情况下,前端页面迭代发布,不需要重启 Nginx 服务。

欢迎关注公众号: 学前端

[转载]原文链接:https://segmentfault.com/a/1190000019209642

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-65177.html

文章标题:Vue-项目从本地搭建到线上部署(wǒ shì biaō tí dǎng)

相关文章
vue+element-ui+slot-scope实现可编辑表格
1.咱开发拿到需求大多数是去网上找成型的组件,找不到再看原生的方法能否实现,大牛除外哈,大牛一般喜欢封装组件框架。 2.可编辑表格在后台管理系统还是比较常用的,因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法,下...
2017-12-25
bootstrap PrintThis打印插件使用详解
bootstrap PrintThis打印效果图: 如图,这个是调用了谷歌的打印,使用很方便,可以自己調样式,需要的可以研究一下,这边贴出使用方法。 附上GitHub:https://github.com/jasonday/printTh...
2017-03-16
html5+JavaScript教程-微信打飞机小游戏源码
js &#x2F;&#x2F; JavaScript Document var c = document.getElementById(&quot;dotu&quot;); var cxt = c.getContext(&quot;2d&q...
2015-11-12
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
为什么要选择Nodejs?Nodejs有什么好处?
什么?JavaScript还能用作服务器编程! Caleb Madrigal是来自美国密尔沃基市的一名软件顾问。四年前,他在听说“将JavaScript用作服务器端语言”这样的说法时,认为那是一个荒唐的想法。有那么多服务器端语言可供选择,为...
2015-11-12
JavaScript编辑器推荐
主流编辑器有SublimeText,Notepad++,webstorm等,是使用最广泛的编辑器,但也有一些JavaScript编辑器提供有着各自的特性和功能,适应不同人的需求,以下是几款优秀的编辑器,相信你一定能找到自己喜欢的。 1. W...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
2015年JavaScript或“亲库而远框架”
2014年过去了,作为一个JavaScript开发者很难满怀信心的去“挽回”一个特定的库或技术,即便是强大的Angular,似乎也因为最近的一些事情而动摇。 2014年10月的ng-europe会议上,Angular开发者团队透露了一个关于...
2015-11-12
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
回到顶部