前言
使用Vue做管理系统和WebApp做过三四个项目了，期间遇到很多坑，再次一一列举，并给出解决方案，方便日后更方便使用，也为他人提供一些解决方案。
问题表象和解决方案
1、编译后js、css等相对路径和绝对路径。
config/inde.js文件
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'stat
Vue CLI 是 Vue.js 的命令行工具，用于快速搭建 Vue 项目。它简化了项目的配置和构建过程，使得开发者可以更加专注于应用的业务逻辑。在使用 Vue CLI 构建项目时，有时会遇到一些常见问题，这里我们将逐一分析并提供解决方案。
1. **编译后的 js、css 等资源路径问题**：
在 `config/index.js` 文件中的 `build` 配置对象里，`assetsPublicPath` 字段决定了资源引用的路径。默认设置为 `'./'` 表示相对路径。如果在部署时需要调整，可以将其更改为绝对路径，如 `'/'`。例如，当项目部署在子目录下时，可能需要设置为 `/subdirectory/`。
2. **CSS 中图片相对路径的编译问题**：
当 CSS 中的背景图片路径在编译后不正确时，可以在 `build/utils.js` 文件中找到对 `ExtractTextPlugin` 的配置进行修改。添加 `publicPath` 参数，根据实际的路径需求进行调整。例如，如果图片路径定义为 `static/img/*`，则需要将 `publicPath` 设置为 `'../../'`。
3. **使用代理解决跨域请求**：
Vue CLI 内置了 `http-proxy-middleware`，可以方便地配置代理以解决开发过程中 API 请求的跨域问题。在 `config/index.js` 文件的 `proxyTable` 对象中定义代理规则，如：
```
proxyTable: {
'/dianmi_service': {
target: 'https://****.com.cn',
changeOrigin: true
},
'/brand_service': {
target: 'https://*****.com.cn',
changeOrigin: true
}
}
```
注意，`target` 字段不应包含工程名，以防止导致服务器 Session 问题。
4. **Vue 页面在 phonegap 编译的 Android App 中的兼容性问题**：
旧版本的 Cordova Android（如 4.0 以下）的默认 WebView 不支持 ES6，这可能导致 Vue 应用出现问题。为解决这个问题，可以使用腾讯浏览服务 X5 内核。一种方法是安装基于 X5 内核的 Cordova 插件，如 `cordova-plugin-x5engine-webview`。通过这个插件，可以在低版本 Android 设备上顺利运行 Vue 项目。
总结来说，Vue CLI 构建 Vue 项目时遇到的问题主要包括资源路径的调整、CSS 图片路径的修正、API 跨域请求的代理配置以及针对低版本 Android 兼容性的处理。理解这些问题的解决方案，有助于提高开发效率并确保项目的顺利部署。
