vue项目上线准备接口地址及优化

YvLu
842 阅读3分钟

6、环境变量

cli.vuejs.org/zh/guide/mo…

在我们的vue-cli脚手架里面，有环境变量的概念，主要分为生成环境、开发环境。

可以通过 process.env 来读取环境变量的信息

{
    BASE_URL: "/"   // 表示项目运行的地址
	NODE_ENV: "development"  // 表示当前项目运行的环境  development 表示开发环境、 production 表示生产环境
}

我们通过 process.env.NODE_ENV==='production' 判断是否为生产环境

使用场景：

const $axios = axios.create({
  // baseURL: 'http://127.0.0.1:8888/api/private/v1/', // 本地的
  // // baseURL: 'http://122.51.249.55:5000/api/private/v1',  // 在线的
  baseURL: process.env.NODE_ENV === 'production' ? 'http://122.51.249.55:5000/api/private/v1' : 'http://127.0.0.1:8888/api/private/v1/',
  timeout: 5000
})

自定义环境变量信息

在 项目根目录创建 .env.development 文件 和 .env.production 文件

.env.production 内容

VUE_APP_TITLE = 武哥很帅，生产环境
# 上线时候的接口地址
VUE_APP_APIURL = http://122.51.249.55:5000/api/private/v1

.env.development内容

# 表示注释
# 格式：  
# 键=值   值的类型无论是什么都不要加引号
# VUE_APP_属性名 = 数据
VUE_APP_TITLE = 武哥很帅，开发环境
VUE_APP_APIURL = http://127.0.0.1:8888/api/private/v1/

使用常见，直接读取环境变量里面的接口前缀地址

const $axios = axios.create({
  baseURL: process.env.VUE_APP_APIURL, // 读取不同环境变量的信息
  timeout: 5000
})

7、vue-cli脚手架配置

vue-cli的脚手架配置在项目的根目录里面创建vue.config.js里面进行配置即可。

// @vue/cli 手脚架的配置文件
// 暴露一个模块，遵循CommonJS 规范

// 判断是否为生产环境
const idProd = process.env.NODE_ENV === 'production'

module.exports = {
  // 部署路径，我们可以通过判断是否为生产环境，如果是生产环境就让他为./这样就可以直接打开dist里面的内容
  publicPath: idProd ? './' : '/', // 默认是/   【重要】
  outputDir: 'dist', // 默认是dist   打包出口文件夹
  assetsDir: 'static', // 默认是 空 ，存放静态文件文件夹
  indexPath: 'index.html', // 指定生成的 index.html 的输出路径
  devServer: {
    host: '127.0.0.1', // 运行主机地址
    port: 3000, // 运行端口
    open: true // 自动打开浏览器
  },
  // 设置webpack的相关配置信息 【对象式配置】
  configureWebpack: {
    plugins: [], // 配置webpack的插件
    module: {}, // 配置loader
    externals: { // 排除编译项
      // echarts: 'echarts'
    }
  },
  // 设置webpack的相关配置信息 【函数式配置】
  chainWebpack: config => {
  }

}

8、打包优化

  • 建议： 配置publicPath publicPath: process.env.NODE_ENV === 'production' ? './' : '/', // 默认是/ 【重要】

  • 如果有能力，就进行体积优化

  • 打包指令 npm run build // 出现dist目录，将dist目录交给后端即可！

  • 项目优化

    • 1、压缩图片体积 tinypng.com/ 不要影响图片的质量
    • 2、字体样式、css文件等可以使用cdn方式。
    • 3、不需要被打包优化的静态内容建议放在public里面，而不是放在assets里面。
    • 4、使用路由懒加载
    • 5、优化webpack的打包项内容，使用cdn资源而不是打包

  • 如何查看项目体积大小

    • 方式1： 使用vue ui 界面化工具查看

  • 方式2：webpack 插件分析,在vue.config.js中配置输出

    // 导入webpack插件，不需要安装，vue-cli里面已经集成好了 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

    module.exports = { ... // 其他配置 configureWebpack: { plugins: [new BundleAnalyzerPlugin()] } ... // 其他配置
    }

配置好以后，我们打包的时候执行 npm run build --report

这样配置会在生成环境和开发环境下都运行体积报告！，【建议只配置生产环境，如下操作】

完整的vue.config.js

// @vue/cli 手脚架的配置文件
// 暴露一个模块，遵循CommonJS 规范

// 判断是否为生产环境
const idProd = process.env.NODE_ENV === 'production'

// 导入webpack插件，不需要安装，vue-cli里面已经集成好了
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
let plugins = [] // webapck的插件
let cdn = { css: [], js: ['https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js'] } // cdn资源
let externals = {
  echarts: 'echarts'
} // 排除项
if (idProd) {
  plugins = [new BundleAnalyzerPlugin()]
  cdn = {
    css: [
      'https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css',
      'https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css',
      'https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css',
      'https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css',
       'https://unpkg.com/element-ui@2.15.2/lib/theme-chalk/index.css'
    ],
    js: [
      'https://cdn.jsdelivr.net/npm/vue@2.6.12',
      'https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js',
      'https://cdn.staticfile.org/axios/0.18.0/axios.min.js',
      'https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js',
      'https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js',
      'https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js',
      'https://cdn.staticfile.org/quill/1.3.4/quill.min.js',
      'https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js',
      'https://unpkg.com/element-ui@2.15.2/lib/index.js'
    ]
  }
  externals = {
    // 键 是 包名
    // 值 是 全局引入的cdn资源暴露在window中变量名称，这个一定要注意，确保正确，否则会因为找不到而使得项目无法打包
    vue: 'Vue',
    'element-ui': 'ELEMENT',
    'vue-router': 'VueRouter',
    axios: 'axios',
    lodash: '_',
    echarts: 'echarts',
    nprogress: 'NProgress',
    'vue-quill-editor': 'VueQuillEditor'
  }
}

module.exports = {
  // 部署路径，我们可以通过判断是否为生产环境，如果是生产环境就让他为./这样就可以直接打开dist里面的内容
  publicPath: idProd ? './' : '/', // 默认是/
  outputDir: 'dist', // 默认是dist   打包出口文件夹
  assetsDir: 'static', // 默认是 空 ，存放静态文件文件夹
  indexPath: 'index.html', // 指定生成的 index.html 的输出路径
  devServer: {
    host: '127.0.0.1', // 运行主机地址
    port: 3000, // 运行端口
    open: true // 自动打开浏览器
  },
  // 设置webpack的相关配置信息 【对象式配置】
  configureWebpack: {
    plugins: plugins, // 配置webpack的插件
    module: {}, // 配置loader
    externals: externals // 排除编译项
  },
  // 设置webpack的相关配置信息 【函数式配置】
  chainWebpack: config => {
    // 配置 webpack-plugin-html 插件中的内容。 args[0] 表示配置信息，增加cdn变量
    config.plugin('html').tap(args => {
      args[0].cdn = cdn
      return args // 需要return
    })
  }

}

public/index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <head>
      <!-- 引入样式 -->
      <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
        <link rel="stylesheet" href="<%=css%>">
      <% } %>
    </head>
    
    <!-- 引入JS -->
    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%=js%>"></script>
    <% } %>
  </head>
avatar
文章
阅读
粉丝