Vue 进阶面试题, 如何解决 Vue 打包后静态资源图片失效的问题?
Vue 进阶面试题, 如何解决 Vue 打包后静态资源图片失效的问题?
QA
Step 1
Q:: 如何解决 Vue 打包后静态资源图片失效的问题？
A:: Vue 打包后静态资源图片失效通常是因为资源路径问题。Webpack 在打包时会处理路径，使得图片资源的路径可能发生变化。可以通过以下方式解决：
1. 使用 require 或 import 引入图片：<img :src="require('@/assets/logo.png')" />。
2. 确保在 Vue 配置文件 (``vue.config.js``) 中正确设置 publicPath 以适应部署环境。
3. 在使用 CSS 背景图片时，确保路径正确，通常使用 ~@/assets/ 来指代 src/assets 目录。
4. 在 public 目录下的静态资源，可以通过绝对路径 /img/logo.png 引用。
Step 2
Q:: Vue 打包时 publicPath 是什么？如何配置？
A:: publicPath 是 Vue CLI 中的一个配置项，用于设置打包后所有静态资源的基本路径。默认情况下为 '/'，表示所有资源相对于网站根目录。如果项目部署在子目录中，如 /app/，则需要将 publicPath 设置为 '/app/'。配置方法是在 vue.config.js 文件中添加 module.exports = { publicPath: '/app/' }。
Step 3
Q:: 如何优化 Vue 项目的打包体积？
A:: 可以通过以下几种方式优化 Vue 项目的打包体积：
1. 代码分割：使用动态 import 实现路由懒加载。
2. Tree Shaking：移除未使用的代码。
3. 压缩 CSS 和 JS 文件：配置 css-minimizer-webpack-plugin 和 terser-webpack-plugin。
4. 使用 CDN 加速：将常用的库如 Vue、Element UI 等通过 CDN 引入，而不是打包在一起。
5. 关闭 sourceMap 生成：通过配置 vue.config.js 中的 productionSourceMap: false。
Step 4
Q:: 在 Vue 项目中如何管理静态资源？
A:: 在 Vue 项目中，静态资源可以放置在 src/assets 目录下，通过相对路径或者使用 require 引入，适用于需要参与 Webpack 打包处理的资源。而 public 目录中的静态资源不会经过 Webpack 打包处理，适合放置 favicon、manifest 等静态文件，使用时可以通过绝对路径直接引用。
Step 5
Q:: Vue 项目如何处理不同环境下的配置文件？
A:: Vue 项目可以通过 .env 文件管理不同环境的变量。在项目根目录中可以创建 .env.development``, .env.production``, .env.staging 等文件，并在其中定义环境变量，如 VUE_APP_API_URL=https://api.dev.example.com。在代码中可以通过 process.env.VUE_APP_API_URL 访问对应的环境变量。此外，还可以在 vue.config.js 中根据 process.env.NODE_ENV 判断当前环境，进行配置调整。