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可视化创建
1
2
3
4
5

明显区别是从vue CLI2后，vue-cli3.0 项目初始化方式，目前模版是固定的。模版选项可以自由配置，创建出来的是vue-cli3.0的项目，与vue-cli2.0项目结构不同，配置不同，具体配置方法参考官网。

vue init 是vue-cli2.0的项目初始方式，webpack是官方推荐标准搭建

vue-cli的版本查看

vue -V
1

（测试自己的本地版本：2.9.6）

不同脚手架版本下的命令和文件结构对比

vue CLI2

创建项目模板指令： vue init webpack project2
模板结构：
--build
   |---webpack.base.conf.js
   |---build.js等等
--config   
   |---dev.env.js
   |---prod.env.js
--src
...
1
2
3
4
5
6
7
8
9
10

其他

创建项目模板指令： vue create my-project
模板结构：
--bublic
    |---favicon.ico
    |---index.html
--src
...
1
2
3
4
5
6
7

1.2 不同环境配置下的注意事项

vue CLI2

根目录下自动生成的有

--build
    |---webpack.base.conf.js
    |---build.js等等
--config   
    |---dev.env.js
    |---prod.env.js
--src
...
1
2
3
4
5
6
7
8

通过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": "*",
    },
}

1
2
3
4
5
6
7
8
9
10

这样才会有效果。

其他

根目录下配置

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 vue-cli@2.8.2"回车安装
npm安装指定版本的package，只需要在命令行之后加上 @版本号即可。

安装vue-cli 2.x指定版本
npm install -g vue-cli@2.x.x
//注意此处只有一个@

查看vue-cli3.x及以上可以安装的版本
npm view @vue/cli versions --json
安装：
例如 3.11.0版本
npm install -g @vue/cli@3.11.0

查看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，查看安装成功。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

————————————————
原文链接：https://blog.csdn.net/qq_43780814/article/details/112935636

4 升级VueGLi 可能碰到的问题

Vue packages version mismatch:

- vue@3.2.45 (C:\Users\15612\AppData\Roaming\npm\node_modules\vue\index.js)
- vue-template-compiler@2.7.14 (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.
1
2
3
4
5
6
7
8
9

提示： vue@3.2.45 vue-template-compiler@2.7.14 两个版本不对应。

npm i vue-template-compiler@3.2.45 --save

npm update vue-template-compiler

vueGLI版本和本地的vue模板版本不一致。需要匹配才可以。
（有误可留言）