4.0创建项目的方式差异解读和vue-cli4.0打包命令和环境配置

vue-cli2.x和vue-cli3.x 或者 vue-cli4.x 差异不能说非常大但是简洁了许多和看起来清爽了许多更方便使用了；准备工作先分析再来实践

更新到 3.x / 4.x 之后，vue-cli 的包名从 vue-cli 改成了 @vue/cli
官网文档地址：https://cli.vuejs.org/zh/guide/installation.html

查看其版本：vue -V 或者 vue --version

如果你安装了旧版本的cil请先移除：
npm uninstall vue-cli -g
# OR
yarn global remove vue-cli

然后重新安装新版本的 @vue/cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli

1.x 和 2.x 的的 vue-cli 采用 init 命令创建项目

vue init webpack project-name

3.x / 4.x 之后vue-cli 采用 create 命令创建项目

vue create project-name

vue-cli3与vue-cli4的区别：@vue/cli-plugin-pwa、@vue/cli-service等包的增强，原来在根目录下的store.js、router.js被分别放到了对应的文件夹下

webpack的安装：要安装最新版本或特定版本，请运行以下命令之一
npm install --save-dev webpack
npm install --save-dev webpack@<version>
如果你使用 webpack 4+ 版本，你还需要安装 CLI
npm install --save-dev webpack-cli

全局安装：
npm install --global webpack
npm install --global webpack-cli

查看版本：webpack -v;

/*
 * @Description: vue.config.js 参考文档：https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
 * @Version: 2.0
 * @Autor: lhl
 * @Date: 2020-08-26 17:03:04
 * @LastEditors: lhl
 * @LastEditTime: 2020-08-27 10:06:40
 */
module.exports = {
  // 部署应用包时的基本 URL  这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径
  // 把开发服务器架设在根路径，可以使用一个条件式的值 process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/'
  publicPath:  './',
  // 构建输出目录（打包位置）
  outputDir: 'dist',
  // 静态资源目录  (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 -->打包后dist下面的静态资源文件夹名称
  assetsDir: 'static',
  // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。Default
  indexPath: 'index.html',
  // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
  lintOnSave: process.env.NODE_ENV !== 'production',
  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
  productionSourceMap: false,
  // 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中
  // 如果你需要基于环境有条件地配置行为，或者想要直接修改配置，那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内，你可以直接修改配置，或者返回一个将会被合并的对象
  configureWebpack: {},
  // 对内部的 webpack 配置（比如修改、增加Loader选项）(链式操作)
  chainWebpack: () => {

  },
  // css的处理
  css: {
    // 默认情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块
    requireModuleExtension: true,
    // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中,当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS
    // 默认生产环境下是 true，开发环境下是 false  是否使用css分离插件 ExtractTextPlugin
    extract: false,
    // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能
    sourceMap: false,
    //向 CSS 相关的 loader 传递选项(支持 css-loader postcss-loader sass-loader less-loader stylus-loader)
    loaderOptions: {
      css: {},
      less: {}
    }
  },
  // 所有 webpack-dev-server 的选项都支持  更多参考：https://webpack.js.org/configuration/dev-server/
  devServer: {
    host: '0.0.0.0', // 允许外部ip访问
    open: true, //设置自动打开浏览器
    port: 8989, //设置端口
    proxy: {
      //设置代理
      '/api': {
        target: 'xxx', // 接口的域名
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        secure: false, // 如果是https接口，需要配置这个参数
        pathRewrite: {  // 如果接口本身没有/api需要通过pathRewrite来重写接口地址
          '^/api': ''
        }
      }
    }
  },
  // 向 PWA 插件传递选项
  pwa: {},
  // 第三方插件配置
  pluginOptions: {

  }
}

接下来说下环境变量配置（系统变量）和分环境打包命令配置

新建文件：.env.beta 预生产环境

NODE_ENV=beta
VUE_APP_TITLE=My App beta(staging)
VUE_APP_BASE_URL=https://www.beta.com/

新建文件：.env.development 开发环境

NODE_ENV=development
VUE_APP_TITLE=My App development 只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中你可以在应用的代码中这样访问它们：console.log(process.env.VUE_APP_SECRET)(staging)
VUE_APP_BASE_URL=http://xx.x.xxx.xxx:8080/xxx

新建文件：.env.test 测试环境

NODE_ENV=test
VUE_APP_TITLE=My App test (staging)
VUE_APP_BASE_URL=https://www.test.com/

新建文件：.env.production 生产环境

NODE_ENV=production
VUE_APP_TITLE=My App production (staging)
VUE_APP_BASE_URL=https://www.production.com/

package.json文件加上：对应的打包命令

    "build-dev": "vue-cli-service build --mode development",
    "build-test": "vue-cli-service build --mode test",
    "build-beta": "vue-cli-service build --mode beta",
    "build-prod": "vue-cli-service build --mode production"

执行 cnpm/npm run build-dev 打本地开发包

执行 cnpm/npm run build-test 打测试包

执行 cnpm/npm run build-beta 打预生产包

执行 cnpm/npm run build-prod 打生产包

到此vue-cli3.x / 4.x环境区分和命令打包配置完成，路由/组件/vuex语法参照官网即可配置项参照官方在 vue.config.js 配置即可生效;

以上代码为原创内容，谢绝转载！！！如需测试，自己动手！！！！

__EOF__

本文作者：蓝色帅-橙子哥，关注公众号【鱼樱AI实验室】持续每天分享更多前端和AI辅助前端编码新知识
本文链接：https://www.cnblogs.com/lhl66/p/13570026.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！