使用vue-cli4.x构建项目

拼搏现实的明天。 2023-10-06 15:33 29阅读 0赞

vue-cli是基于webpack 构建vue自动化开发环境的脚手架。

啥是脚手架?

![7aeb60f4d011a02e1b9cb8730baf6cde.png][]

虽然大家没有在建筑工地上搬过砖，但是肯定都见过农民工兄弟在建造大楼前,先通过钢管结构,搭建起大楼的框架吧

![d62e281a2a589b29dc7e71a8b6e7122c.png][]

对，如果我们写的项目是一栋大厦的话，那么vuecli就是,勤劳的农民工兄弟，帮我们在写项目前,把项目的基础结构搭建起来。好啦，接下来我们看看脚手架如何使用吧。

#### **安装** ####

在 cmd中 输入以下命令安装

npm install -g @vue/cli
    // OR
    yarn global add @vue/cli

![0283a83942e6b8c9284f89ac17d99462.png][]

静静等待安装成功后在控制台中输入

以下命令,验证是否安装成功

vue --version

如果出现版本号,恭喜你安装成功了,可以愉快的玩耍了!

#### **启动项目** ####

在合适的位置,打开cmd,输入

vue create <project-name>  // 注意 目录名不能出现大写字母（不要使用驼峰）

![311ddf8b5d9c20f05c0a12369f73f3c2.png][]

回车之后

![dd73dd91b19d758f5244daafac01a622.png][]

让我们选择两个预设：default默认的，只有babel和讨厌的eslint,显然满足不了我们的需求,我们选择Manually select features 自定义选择我们需要的配置

我们选择的配置如下

![990fd4c492c73f6a3a502d0cee72a941.png][]

选择是否使用路由 history router，其实直白来说就是是否路径带 \# 号，建议选择 N，否则服务器还要进行配置

![7e15e9c8e23ed347e92fb9188faf3aca.png][]

css 的预处理器我选择的是 Sass/SCSS(with dart-sass) 。node-sass是自动编译实时的，dart-sass需要保存后才会生效

sass 官方目前主力推 dart-sass 最新的特性都会在这个上面先实现

![558247f418b83e2a3c9310cdb708e294.png][]

选择 ESLint 代码校验规则，提供一个插件化的javascript代码检测工具，ESLint + Prettier 使用较多

![ecd468f2b8f5e27d8ace13f41c3276ce.png][]

然后选择什么时候进行代码校验，Lint on save 保存就检查，Lint and fix on commit fix 或者 commit 的时候检查，建议第一个

下面就是如何存放配置了，In dedicated config files 存放到独立文件中，In package.json 存放到 package.json 中

本着项目结构简单的想法，我选择了第二个

![6e998354ecc16ceab1c0f51ba2e9d8f6.png][]

最后就是是否保存本次的配置了，N 不记录，如果选择 Y 需要输入保存名字

我这里就不保存了，原因是熟能生巧！哈哈哈

![607961287a1948ca46d3a06fae159808.png][]

然后就等待创建项目吧

![7cf3f5cc7e753164ce12f2c0ecb23d17.png][]

出现如图红框所示的提示，就搭建成功，进入项目目录，直接输入 npm run serve 就可以了

![0c29ecd240563db34a9a883731b7d9bf.png][]

你以为这样就完了吗？我也是这样认为的，可它不是这样的！

![adf5cb83cc242997f5a6e795c449f040.png][]

很明显，虽然项目能够正常启动，但是我的 nodeJs 版本用的太高了，然后我给回退到了 11.11.0 版本

虽然没影响太大的影响，但是我不想看见 WARN！回退之后，重新跑项目就不会有问题了。

![6111baaa042c6093adf73716bafd4cb6.png][]

#### **三、目录结构** ####

接下来我们看看脚手架替我们生成了哪些文件吧

node-modules // 包文件
     public // 静态资源目录
        index.html // 当前项目中 唯一的 html
        favicon.ico // 标题 图标
     src  // 源码目录 这是我们写代码的目录哦
        assets //  放静态资源目录 （代码中的 css js img 字体图标等 放在这里） 
        components // 放公共组件的目录
        router // 路由配置文件
        store // vuex的目录
        views // 放路由组件
        App.vue // 全局的根组件
        main.js // 入口函数
      .browserslistrc  // 配置 postCss自动给css加 浏览器前缀的规则
      .eslintrc.js //  eslint的配置文件
      babel.config.js // babel配置文件

#### **四、环境配置** ####

下面就是关于项目的环境配置了，我这边一般喜欢用 test、preview、production分别表示测试，预览，生产三种环境

修改 package.json 文件如下

"scripts": {
    
        "serve": "vue-cli-service serve",
    
        "test": "vue-cli-service build --mode test",           //测试
    
        "preview": "vue-cli-service build --mode preview",     //预览
    
        "build": "vue-cli-service build --mode production",    //生产
    
        "lint": "vue-cli-service lint"
    
    },

在项目根目录下新建 .env.test、.env.preview、 .env.production 文件，分别对应三个环境的配置文件，注意，名字要与 --mode 后面的名字分别对应

.env.test 代码如下

NODE_ENV="test"
    
    VUE_APP_BASE_URL="测试环境域名"

.env.pre 代码如下

NODE_ENV="preview"
    
    VUE_APP_BASE_URL="预览环境域名"

.env.prod 代码如下

NODE_ENV="production"
    
    VUE_APP_BASE_URL="生产环境域名"

ok，这样环境就配置好了，分别用以下命令来打包不同环境的包就可以了

npm run test    //测试
    
    npm run pre     //预发布
    
    npm run prod    //生产

另外需要说明一点的是，本地环境会默认从 .env.development 文件中读取配置

所以记得有需要记得新建一个然后存放配置

我的 .env.development 代码如下

NODE_ENV="development"
    
    
    VUE_APP_BASE_URL="本地环境域名"

#### **五、项目配置** ####

从 vue-cli3.0 开始 build 和 config 目录就取消了，如果需要修改配置，可以在项目的根目录新建一个 vue.config.js 文件来覆盖项目的配置，因为项目的配置比较多，下面简单列举常用的配置

const path = require('path')
    module.exports = {
      outputDir:"build", // 定义 构建生产环境的 目录 默认是dist
      assetsDir:"static",  // 构建生产环境时，静态资源存放的目录，默认是存放在根目录
      productionSourceMap:false, // 移除 讨厌的.map文件，加快 服务器响应速度
      devServer: {
        port: 3000, // 自定义端口
        open: true, // 启动时自动打开浏览器
        proxy: { // 请求的反向代理 解决跨域的问题哦，
          '/conner': { // 请求 接口 以 /conner开头，自动匹配
            target: 'https://api.it120.cc', // 目标地址
            ws: false,
            changeOrigin: true, // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
            pathRewrite: { // 路径重写
              '^/conner': '/conner'
            } // 这里重写路径
          }
        }
       
      },
      lintOnSave: false, // 定义eslint的 检查
      chainWebpack:(config)=>{  // 配置路径别名 这个很重要哦
        config.resolve.alias
        .set('@', path.join(__dirname, 'src'))
        .set('components', path.join(__dirname, 'src/components'))
        .set('views', path.join(__dirname, 'src/views'))
        .set('api', path.join(__dirname, 'src/api'))
        .set('utils', path.join(__dirname, 'src/utils'))
        .set('mixins', path.join(__dirname, 'src/mixins'))
        .set('plugins', path.join(__dirname, 'src/plugins'))
      }
    }

[7aeb60f4d011a02e1b9cb8730baf6cde.png]: https://img-blog.csdnimg.cn/img_convert/7aeb60f4d011a02e1b9cb8730baf6cde.png
[d62e281a2a589b29dc7e71a8b6e7122c.png]: https://img-blog.csdnimg.cn/img_convert/d62e281a2a589b29dc7e71a8b6e7122c.png
[0283a83942e6b8c9284f89ac17d99462.png]: https://img-blog.csdnimg.cn/img_convert/0283a83942e6b8c9284f89ac17d99462.png
[311ddf8b5d9c20f05c0a12369f73f3c2.png]: https://img-blog.csdnimg.cn/img_convert/311ddf8b5d9c20f05c0a12369f73f3c2.png
[dd73dd91b19d758f5244daafac01a622.png]: https://img-blog.csdnimg.cn/img_convert/dd73dd91b19d758f5244daafac01a622.png
[990fd4c492c73f6a3a502d0cee72a941.png]: https://img-blog.csdnimg.cn/img_convert/990fd4c492c73f6a3a502d0cee72a941.png
[7e15e9c8e23ed347e92fb9188faf3aca.png]: https://img-blog.csdnimg.cn/img_convert/7e15e9c8e23ed347e92fb9188faf3aca.png
[558247f418b83e2a3c9310cdb708e294.png]: https://img-blog.csdnimg.cn/img_convert/558247f418b83e2a3c9310cdb708e294.png
[ecd468f2b8f5e27d8ace13f41c3276ce.png]: https://img-blog.csdnimg.cn/img_convert/ecd468f2b8f5e27d8ace13f41c3276ce.png
[6e998354ecc16ceab1c0f51ba2e9d8f6.png]: https://img-blog.csdnimg.cn/img_convert/6e998354ecc16ceab1c0f51ba2e9d8f6.png
[607961287a1948ca46d3a06fae159808.png]: https://img-blog.csdnimg.cn/img_convert/607961287a1948ca46d3a06fae159808.png
[7cf3f5cc7e753164ce12f2c0ecb23d17.png]: https://img-blog.csdnimg.cn/img_convert/7cf3f5cc7e753164ce12f2c0ecb23d17.png
[0c29ecd240563db34a9a883731b7d9bf.png]: https://img-blog.csdnimg.cn/img_convert/0c29ecd240563db34a9a883731b7d9bf.png
[adf5cb83cc242997f5a6e795c449f040.png]: https://img-blog.csdnimg.cn/img_convert/adf5cb83cc242997f5a6e795c449f040.png
[6111baaa042c6093adf73716bafd4cb6.png]: https://img-blog.csdnimg.cn/img_convert/6111baaa042c6093adf73716bafd4cb6.png