关于vue-cli2.x创建项目迁移到vue-cli4.x版本过程及问题

• 项目背景

公司有一个老项目最近要修改东西，此时发现因为开发新项目需要，本地环境vue脚手架已经升级到了4.5版本，无法运行npm run dev,因为4.x需要npm run serve启动项目，所以需要对2.x创建的项目迁移到4.x项目环境。

• 迁移过程

1. 使用 vue create xxx 创建新项目。

2. 把老项目中src目录中文件整体迁移替换到新项目src目录。

3. 把pages目录名修改为views。

4. 修改了views后记得修改router文件中组件引用的路径。

5. 把index.html和static文件下的favicon.ico 移动到public文件夹（4.x静态资源会放到public文件夹下）。

6. 修改main.js中以下代码（4.x和2.x挂载方式有变）。

   
   
   image.png

7. 替换配置文件，主要是替换package.json,中devDependencies依赖，把老项目中此项中依赖复制到新的package.json文件对应位置。

   
   
   image.png

8. 如果有跨域需求，在新项目根目录创建vue.config.js文件夹进行配置，因为脚手架4.x默认不会暴露webpack配置项。

   
   
   image.png

9. 执行npm install 安装依赖（过程中可能会报错，缺少一些开发时依赖等，缺少那个npm install 就ok了）。

以上就是迁移的过程。

• 遇到的问题

当我把项目迁移完成后，打包之后，部署到服务器，访问接口总是报跨域问题，因为之前老项目已经后端配置过跨域而且为迁移之前打包后可以正常访问，所以排除后端未配置的原因。

配置问题：2.x之前api接口定义我是这样写的：

image.png

因为每个接口都要加BASE_URL所以后面想着根据开发环境还是生产环境配置到全局，变成了一下这样：

image.png

在axios全局拦截封装中加入了以上代码
因为后端配置所有访问/api前缀的接口允许跨域，这样修改后请求地址中并没有/api而是直接调用服务器地址端口号接口名，nginx拦截转发时就产生了跨域问题。

• 总结：还是自己对脚手架及webpack配置不熟悉造成的，记录一下长长记性！