vue看项目文件判断配置方法
vue看项目文件判断配置方法
背景：你是否有过，配置项目的代理，开发环境，或者打包设置，重新启动项目，而没有生效？那么，你可能忽略了项目创建方式，和默认配置的作用。
1. Vue创建项目的几种方式
1.1. VueCLI提供的模板
在使用之前，可以先用 vue-list命令查询可用的模板
详解：
vue-cli提供了的常用的脚手架模板：
webpack：基于 webpack 和 vue-loader 的目录结构，而且支持热部署、代码检查、测试及 css 抽取。
webpack-simple：基于 webpack 和 vue-loader 的目录结构。
browerify：基于 Browerfiy 和 vueify(作用于 vue-loader 类似)的结构，支持热部署、代码检查及单元测试。
browerify-simple：基于 Browerfiy 和 vueify 的结构。
simple：单个引入 Vue.js 的 index.html 页面。
这里我们主要会使用 webpack 作为常用脚手架，可以运行vue init webpack my-project 来生成项目。
版本目前有
vue CLI2 vue init webpack my-project 无可视化创建
vue CLI3 vue create my-project vue ui可视化创建
vue CLI4 vue create my-project vue ui可视化创建
vue CLI5 vue create my-project vue ui可视化创建
明显区别是从vue CLI2后，vue-cli3.0 项目初始化方式，目前模版是固定的。模版选项可以自由配置，创建出来的是vue-cli3.0的项目，与vue-cli2.0项目结构不同，配置不同，具体配置方法参考官网。
vue init 是vue-cli2.0的项目初始方式，webpack是官方推荐标准搭建
vue-cli的版本查看
vue -V
（测试自己的本地版本：2.9.6）
不同脚手架版本下的命令和文件结构对比
vue CLI2
创建项目模板指令： vue init webpack project2
模板结构：
--build
|---webpack.base.conf.js
|---build.js等等
--config
|---dev.env.js
|---prod.env.js
--src
...
其他
创建项目模板指令： vue create my-project
模板结构：
--bublic
|---favicon.ico
|---index.html
--src
...
1.2 不同环境配置下的注意事项
vue CLI2
根目录下自动生成的有
--build
|---webpack.base.conf.js
|---build.js等等
--config
|---dev.env.js
|---prod.env.js
--src
...
通过config文件下的js配置环境，build文件夹下js，配置webpack 其他的基础项。
注意点：本地测试发现 在VUE CLI2目录框架下，配置vue.config.js基本是无效的，说明build config文件下的配置优先级最高，比如配置项目前端服务跨域，要去 webpack.dev.conf.js文件
devServer: {
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers": "*",
"Access-Control-Allow-Methods": "*",
},
}
这样才会有效果。
其他
根目录下配置
vue.config.js文件 +
.env.development,
.env.production,
.env.staging
三个文件，来配置环境和环境变量，配置插件，启动命令，端口，打包等。
参考文章
3.安装卸载和查看历史版本vue-cli
1.安装node.js（官网选择稳定版本或者推荐版本下载进行安装，傻瓜式安装即可，可以更改安装路径）
2.安装Vue-cli
（1）可能npm没有配置国内镜像,国外的仓库总是不容易拉取的，所以先换一下国内的镜像。
命令行输入"npm -g cnpm --registy=https://registry.npm.taobao.org"回车使用淘宝镜像
（2）然后进行Vue脚手架安装：
全局安装：命令行输入npm install vue-cli -g
指定版本的安装：命令行输入"npm install -g [email protected]"回车安装
npm安装指定版本的package，只需要在命令行之后加上 @版本号即可。
安装vue-cli 2.x指定版本
npm install -g [email protected]
//注意此处只有一个@
查看vue-cli3.x及以上可以安装的版本
npm view @vue/cli versions --json
安装：
例如 3.11.0版本
npm install -g @vue/[email protected]
查看vue-cli2.x及以下可以安装的版本
npm view vue-cli versions --json
3.安装webpack
在 webpack3 中，webpack与webpack-cli是绑定的。也就是你使用"npm i webpack -g"安装了webpack以后，webpack-cli是默认就安装上了。但是到了webpack4，这2个东西已经被分解成了2个完全独立的包，所以，你还需要独立安装webpack-cli。
命令行输入 npm install webspack -g安装webpack。
命令行输入 npm i webpack-cli -g 安装webpack-cli。
输入webpack -v，查看安装成功。
————————————————
原文链接：https://blog.csdn.net/qq_43780814/article/details/112935636
4 升级VueGLi 可能碰到的问题
Vue packages version mismatch:
- [email protected] (C:\Users\15612\AppData\Roaming\npm\node_modules\vue\index.js)
- [email protected] (C:\Users\15612\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\vue-template-compiler\package.json)
This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.
提示： [email protected] [email protected] 两个版本不对应。
npm i [email protected] --save
npm update vue-template-compiler
vueGLI版本和本地的vue模板版本不一致。需要匹配才可以。
（有误可留言）