Vue CLI 3.x 脚手架

Vue CLI 3.x 脚手架

什么是Vue-CLI

Vue-CLI 是 VUE 官方提供，用来搭建项目脚手架的工具，他是vue.js标准的工具，他已经集成了，webpack，内置了好多常用的配置，使我们在使用 Vue 开发项目的时候更加标准化。

安装：

npm install -g @vue/cli

使用命令来查看版本

vue --version

通过脚手架创建出来的项目结构

通过脚手架创建项目请看这里：https://blog.csdn.net/weixin_42776111/article/details/107875228

自定义配置

常用基本配置：https://cli.vuejs.org/zh/config/#vue-config-js

在项目根目录下创建 vue.config.js 文件。

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。严格遵照 JSON 的格式来写。

这个文件应该导出一个包含了选项的对象：

 // vue.config.js
module.exports = {
    
    
  // 选项...
}

常见基础配置：

// vue.config.js
module.exports = {
    
    
    // 部署应用包时的基本 URL.默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。
    // publicPath: '/'  

    devServer: {
    
    
        port: 8001,  // 端口，如果端口被占用紫红提升1
        open: true,  // 启动服务后自动打开浏览器
        https: false, // 协议
        host: 'localhost' // 主机名，也可以是127.0.0.1，或者真机测试的时候0.0.0.0
    },

    lintOnSave: false, // 默认为true，警告仅仅会被输出到命令行，且不会使得编译失败。
    outoutDir: 'dist2', // 默认是dist，存放打包文件的目录
    assetsDir: 'assets', // 存放生产的静态资源文件

    indexPath: 'out/index.html', // 默认为index.html，指定生成的index.html为输出路径

    productionSourceMap: false,  // 打包时，不生成.map文件，加快打包

  }