面试题：Vue项目中静态资源在不同环境（开发、测试、生产）下的管理差异

1. 开发环境

静态资源路径配置：通常相对路径即可，方便开发时直接访问项目内的静态资源，例如 ./assets/images/logo.png。
引用方式：直接在模板、样式或脚本中按相对路径引用，如 <img src="./assets/images/logo.png" /> ，在CSS中 background-image: url('./assets/images/bg.jpg') 。
优化策略：无需过多优化，以快速开发和调试为目的，通常不进行压缩、合并等操作。
实现差异管理：一般在 vue.config.js 中进行简单配置，例如：

module.exports = {
  devServer: {
    // 可配置静态资源目录
    contentBase: './src/assets' 
  }
}

2. 测试环境

静态资源路径配置：可能需要考虑与测试服务器的路径适配，相对路径或根据测试服务器设置合适的基础路径，如 /test-static/assets/images/。
引用方式：根据配置的路径进行引用，如 <img src="/test-static/assets/images/logo.png" /> 。
优化策略：可以进行初步的优化，如图片压缩、CSS和JS的简单合并，以模拟生产环境性能。
实现差异管理：通过环境变量来区分，在 vue.config.js 中结合 process.env.NODE_ENV 判断：

const path = require('path')
module.exports = {
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'test') {
      config.output
      .publicPath('/test-static/')
      .path(path.resolve(__dirname, 'dist-test'))
    }
  }
}

3. 生产环境

静态资源路径配置：通常使用CDN（内容分发网络），路径配置为CDN地址，如 https://cdn.example.com/assets/images/。
引用方式：引用CDN上的资源，如 <img src="https://cdn.example.com/assets/images/logo.png" /> 。
优化策略：全面优化，包括代码压缩、图片深度压缩、CSS和JS的合并与压缩、开启gzip等。
实现差异管理：在 vue.config.js 中结合环境变量配置：

const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
  chainWebpack: config => {
    if (isProduction) {
      config.output
      .publicPath('https://cdn.example.com/')
      .path(path.resolve(__dirname, 'dist'))
      config.plugin('html')
      .tap(args => {
          args[0].cdn = {
            css: ['https://cdn.example.com/css/style.css'],
            js: ['https://cdn.example.com/js/app.js']
          }
          return args
        })
    }
  }
}

同时，可以通过 .env 文件设置不同环境的变量，例如 .env.test 中 NODE_ENV=test，.env.production 中 NODE_ENV=production，在运行构建命令时指定不同的环境文件，如 vue-cli-service build --mode test 。

星途面试题库

面试题：Vue项目中静态资源在不同环境（开发、测试、生产）下的管理差异

知识考点

面试题答案

1. 开发环境

2. 测试环境

3. 生产环境