Vue 进阶面试题, 如何修改 Vue 打包后生成文件的路径?
Vue 进阶面试题, 如何修改 Vue 打包后生成文件的路径?
QA
Step 1
Q:: 如何修改 Vue 打包后生成文件的路径？
A:: 在 Vue 项目中，可以通过修改 vue.config.js 文件中的 outputDir 和 assetsDir 来自定义打包后的输出路径。outputDir 用于指定生成的项目输出目录，而 assetsDir 用于指定静态资源（如 JS、CSS、图片等）的存放目录。例如：
module.exports = {
outputDir: 'dist/my-app',
assetsDir: 'static'
}
这个配置会将打包后的文件生成到 dist/my-app 目录下，并将静态资源放在 static 文件夹中。
Step 2
Q:: 如何修改 Vue 打包后的 publicPath？
A:: publicPath 用于指定应用程序的基础路径，通常在部署到子路径时需要修改。可以在 vue.config.js 中设置 publicPath。例如，如果你的应用部署在域名下的 /my-app/ 路径下，则可以这样配置：
module.exports = {
publicPath: '/my-app/'
}
这样打包后生成的文件中的所有资源引用路径都会以 /my-app/ 为基础路径。
Step 3
Q:: 在 Vue 项目中，如何配置代理来解决跨域问题？
A:: 可以在 vue.config.js 文件中配置 devServer.proxy 选项来设置代理，以解决开发环境中的跨域问题。例如：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:4000',
changeOrigin: true
}
}
}
}
这个配置会将所有以 /api 开头的请求代理到 http://localhost:4000。
Step 4
Q:: 如何优化 Vue 项目的打包体积？
A:: 可以通过以下几种方式优化 Vue 项目的打包体积：
1. 使用 webpack-bundle-analyzer 分析打包体积。
2. 通过 splitChunks 配置进行代码拆分。
3. 使用 externals 配置，将常用的库（如 Vue、Vuex 等）通过 CDN 引入，避免打包到项目中。
4. 移除不必要的第三方库或组件。
5. 使用 vue-router 的懒加载特性按需加载组件。
Step 5
Q:: 如何在 Vue 中使用环境变量？
A:: Vue 项目中可以通过 .env 文件来配置不同环境的变量。Vue 会根据环境变量文件的后缀自动加载对应的配置，例如 .env.development、.env.production。在代码中，可以通过 process.env 访问这些变量。例如：
console.log(process.env.VUE_APP_API_URL);
其中 VUE_APP_ 开头的环境变量会自动注入到 Vue 应用中。