vue-cli3搭建及vue.config.js配置(配置文件完整且不报错)

如果你已经安装了vue 2.9.6 的话，则需要先将其删除指令为：

npm uninstall -g vue-cli

第二步：更新Vue-cli 指令：

npm install -g @vue/cli 或 cnpm install -g @vue/cli 或 yarn global add @vue/cli

第三步：安装之后，记得查看版本号：查看版本（是否安装成功）：vue -V (大写的V)

vue -V

接下来就是构建项目了，输入指令：vue create project-name （project-name为项目名）；

在这里插入图片描述

自定义配置
选择 [自定义]
方向键上下移动，空格选中，Enter确定，自定义配置中，您将会看到这些配置项：

1，是否使用babel做转义

2，是否使用class风格的组件语法

3，选择CSS预处理类型

4，选择语法检测规范
在这里插入图片描述
5，选择保存时检查 / 提交时检查

6，选择配置信息存放位置，单独存放或者并入package.json

7，是否保存当前预设，下次构建无需再次配置

8.完成安装

cd project-name // 进入项目根目录
npm run serve // 运行项目

9.现在在根目录下新建一个 vue.config.js 文件，配置 :vue.config.js
vue-cli 3.0 创建的项目，已经干掉了原有的webpack配置，取而代之的是，vue.config.js
相信很多人尝试配置的时候都遇到了bug。经过一顿深挖github issue 以后终于找到了答案

module.exports = {
    publicPath: '/',//publicPath取代了baseUrl
    outputDir: 'dist',
    lintOnSave: true,
    runtimeCompiler: true, //关键点在这  原来的 Compiler 换成了 runtimeCompiler
    // 调整内部的 webpack 配置。
    // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
    chainWebpack: () => {},
    configureWebpack: () => {},
    // 配置 webpack-dev-server 行为。
    devServer: {
      open: process.platform === 'darwin',
      host: '0.0.0.0',
      port: 8080,
      https: false,
      hotOnly: false,
      // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
      proxy: null, // string | Object
      before: app => {}
    }
  }

vue-cli3搭建及vue.config.js配置(配置文件完整且不报错)

猜你喜欢