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

作者: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,
  }
},
注:有些 webpack 选项是基于 vue.config.js 中的值设置的,所以不能直接修改。如:你应该修改 vue.config.js 中的 publicPath 选项而不是修改 output.publicPath
  • 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服务。

欢迎关注公众号: 学前端

原文链接:segmentfault.com

上一篇:JWT、OAuth 2.0、session 用户授权实战
下一篇:Vue 组件生命周期钩子函数

相关推荐

  • 🔥基于vue3.0.1 beta搭建仿京东淘宝的电商商城项目!

    前言 就在前段时间,vue官方发布了3.0.0beta.1 版本,趁着五一假期有时间,就把之前的一个电商商城的项目,用最新的Composition API拿来改造一下! 👉GitHub地址请访问🔗...

    1 个月前
  • (独家!)webpack 5 changelog 全文翻译

    ★ webpack 团队于北京时间 10 月 12 日凌晨发布了 版本,本文译自 。此部分主要面向非插件开发的 webpack 使用者。 ” 简要说明 此版本重点关注以下内容: ...

    7 个月前
  • (源码分析)为什么 Vue 中 template 有且只能一个 root ?

    引言 今年,疫情并没有影响到各种面经的正常出现,可谓是络绎不绝(学不动...)。然后,在前段时间也看到一个这样的关于 Vue 的问题,为什么每个组件 template 中有且只能一个 root? 可能...

    2 个月前
  • (小白篇)vue-cli3.0创建项目+引入element-ui

    vuecli在2018年8月份发布了3.0版本,经过重构之后,可以说是一个船心版本! 在项目都落地之后,就想升级一下cli版本,尝一尝3.0带来的舒适,也是为后面项目的开展做一个准备。

    1 年前
  • (小小黑科技)vue+echarts实现半圆图表

    如何用echarts实现半圆图表?在echarts官方实例倒腾一波,发现官方并没有提供半圆图表的写法,那怎么办呢?官方没提供,但需求还是要实现的。 半圆图表其实就是饼图的一半,那么简单的思路如下:设...

    1 年前
  • (原创)vue-router的Import() 异步加载模块问题的解决方案

    关注不迷路,如果解决了问题,留下个赞。 1、问题现象 (/public/upload/e221e3db24c3f24a41062b6e4e389df8) 2、出现问题的代码点 (/publ...

    16 天前
  • (vue框架)为element组件赋初始值以后无法更改值得问题

    情况描述:组件未加载时已有初始值,mounted里面加载数据,赋值,渲染以后,组件无法更改内容 data里面已经有这个表单对象的初始值但还是无法修改,之前有过一次,没有给表单绑定对象,所以赋值以后无法...

    1 年前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包(https://npm.taobao.org/mirrors/node/v10.16.0/nodev10.16....

    10 个月前
  • (vuejs学习)1、Vue初上手(*)

    参考《官方(https://cli.vuejs.org/zh/guide/installation.html)》官方: Node 版本要求: Vue CLI 需要 Node.js 8.9 或更高...

    10 个月前
  • 鼠标移入移出效果 -- jQuery/Vue版

    元素内遮罩层根据鼠标方向显示的效果比较常见,比如百度图片里的图片信息展示。自己动手实现jQuery插件版和Vue组件版效果。 原文链接(http://www.bestvist.com/p/56) ...

    2 年前

官方社区

扫码加入 JavaScript 社区