关于vue-cli2和3的那些事

vue-cli能够快速的搭建vue项目结构,在一个新的项目启动为我们配置各种文件目录及项目打包都提供了非常快捷的便利.

安装方式的区别:

vue-cli 2.0 (据说有其他多种方式,下面是我经常用到的)

vue init webpack 2.0project

vue-cli 3.0

vue create 3.0project

如果你开始搭建vue-cli 3.0 这个时候你电脑的vue cli版本必须大于3.0,如果小于3.0会提示你电脑当前vue-cli的版本,同时告诉你2个命令方式可以升级到3以上

$ vue create proejct3

  vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
  You may want to run the following to upgrade to Vue CLI 3:

  npm uninstall -g vue-cli
  npm install -g @vue/cli

按照提示我们进行升级之后,再次创建vue-cli3,可以通过上下键选择是默认配置还是手动配置,如果此时选择第一项,所有配置将按照默认的方式安装

Vue CLI v3.10.0
? Please pick a preset:
> default (babel, eslint)
  Manually select features

选择手动配置后,就可以根据项目的配置进行选择,顶部提示:检查项目所需的功能：（按选择，切换全部，反转选择）

? Check the features needed for your project: (Press  to select,  to toggle all,  to invert selection)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

按照我们的需求进行选择经常用的Vuex和Router,
下面表示询问babel、postss、eslint放在专用配置中还是放在package.json中.

Vue CLI v3.10.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

然而根据我的经验,这个些配置项随着版本不同,一直在变,只要根据自己项目需求选择就好了.

项目启动

vue-cli 2.0

npm run dev

vue-cli 3.0

npm run serve

因为package.json中的"scripts"对象中的名字变了,所以启动命令也就变了,如果不习惯也可以手动改回去

image.png

现在vue-cli3.0的脚手架算是搭起来了,但是仔细对比了一下2.0之后发现启动项目端口号找不到在哪里改了.
这里只需要在根目录下创建一个vue.config.js文件.

module.exports = {
    baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',
    // outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
    // outputDir: 'dist',
    // pages:{ type:Object,Default:undfind } 
    devServer: {
        port: 8888, // 端口号
        host: 'localhost',
        https: false, // https:{type:Boolean}
        open: true, //配置自动启动浏览器
        // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
        proxy: {
            '/api': {
                target: '',
                ws: true,
                changeOrigin: true
            },
            '/foo': {
                target: ''
            }
        },  // 配置多个代理
    }