Vue-cli3项目之Vue.config.js配置文件—取代vue-cli2中build与config

最新推荐文章于 2024-05-14 18:17:08 发布

儒雅的烤地瓜

最新推荐文章于 2024-05-14 18:17:08 发布

阅读量1.6k

点赞数 3

分类专栏： Vue.js 文章标签： vue.js vue.config.js webpack配置 config.js

本文链接：https://blog.csdn.net/sunyctf/article/details/129590503

版权

Vue.js 专栏收录该内容

47 篇文章 24 订阅

订阅专栏

我们在做vue项目的时候，在根目录中肯定都看到过一个vue.config.js文件，那么这个文件在整个项目中到底有什么作用呢？本文就来说说使用Vue-cli3 创建的vue项目中，Vue.config.js文件的配置问题。

说点题外话，先来看看vue-cli3与vue-cli 2版本之间有哪些区别 👇

◼️ vue-cli3与vue-cli 2版本区别

- vue-cli3基于webpack4打造，vue-cli2是基于webpack3

- vue-cli3的设计原则是"0配置"，默认项目目录结构也发生了变化：

◾ 移除了配置文件目录—build和config文件夹，但是多了.env.production和env.development文件;

webpack配置文件目录——vue-cli2：build文件夹； vue-cli3：vue.config.js文件

备注：vue-cli3移除了build文件夹，也就没有了webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js等配置文件

配置文件目录——vue-cli2：config文件夹； vue-cli3：vue.config.js文件

配置域名——vue-cli2: 在config中的dev.env.js和prod.env.js中分别配置； vue-cli3：在 vue.config.js中配置

跨域时配置域名——vue-cli2：在config中的index.js中配置；vue-cli3：在vue.config.js中配置

* index.js

* vue.config.js

◾ 移除了static文件夹，新增 public 文件夹，并且 index.html 移动到 public ◾ 在 src 文件夹中新增了 views 文件夹，用于分类视图组件和公共组◾ vue-cli3提供 vue ui 的命令，提供了可视化配置

◾ 创建项目的命令由vue init webpack 项目名更改为 vue create 项目名；

◾ 启动项目由npm run dev 更改为 npm run serve

使用Vue-cli3 搭建的项目，界面相对之前的Vue-cli2较为简洁，如下图vue-cli3项目结构：

之前的build和config文件夹不见了，那么应该如何配置，如webpack等的配置项呢？只需要在项目的根目录下新建 vue.config.js 文件( 取代了vue-cli2项目中build、config文件配置目录)，在其中进行你需要的相关配置即可（注意：是根目录，而不是src目录）

对比vue-cli2项目结构：解析Vue项目各个文件夹及文件的作用

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。具体可以查阅Vue CLI配置参考：配置参考 | Vue CLI

比较常见的配置项有：

- baseUrl ( publicPath )
Vue CLI 3.3 之前用baseUrl，部署应用包时的基本 URL。

- outputDir
当运行 vue-cli-service build 时生成的生产环境构建文件的目录。

- assetsDir
放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。

- pages
在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。

- lintOnSave
是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。

设置为 true 或 ‘warning’ 时，eslint-loader 会将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败。

- devServer
所有 webpack-dev-server 的选项都支持。

注意：有些值像 host、port 和 https 可能会被命令行参数覆写。有些值像 publicPath 和 historyApiFallback 不应该被修改，因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。

- devServer.proxy
如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。devServer.proxy 可以是一个指向开发环境 API 服务器的字符串。

- pluginOptions
这是一个不进行任何 schema 验证的对象，因此它可以用来传递任何第三方插件选项。

举个栗子：常见配置项的语法如下：

module.exports = {
  // 基本路径 baseURL已经过时
  publicPath: "./",
  // 输出文件目录
  outputDir: "dist",
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  // use the full build with in-browser compiler?
  // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
  // compiler: false,
  // webpack配置
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: () => { },
  configureWebpack: () => { },
  // vue-loader 配置项
  // https://vue-loader.vuejs.org/en/options.html
  // vueLoader: {},
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: true,
  // css相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {},
    // 启用 CSS modules for all css / pre-processor files.
    modules: false,
  },
  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  parallel: require("os").cpus().length > 1,
  // 是否启用dll
  // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
  // dll: false,
  // PWA 插件相关配置
  // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},
  // webpack-dev-server 相关配置
  devServer: {
    open: process.platform === "darwin",
    host: "0.0.0.0", //如果是真机测试，就使用这个IP
    port: 1234,
    https: false,
    hotOnly: false,
    proxy: null, // 设置代理
    before: (app) => { },
  },
  // 第三方插件配置
  pluginOptions: {
    // ...
  },
};

Vue.config.js中配置跨域，代码如下：

devServer: {
  open: true, //浏览器自动打开页面
  host: "0.0.0.0", //如果是真机测试，就使用这个IP
  port: 8911,
  https: false,
  hotOnly: false, //热更新（webpack已实现了，这里false即可）
  proxy: {
    //配置跨域
    "/api": {
      target: "http://192.168.234.237:8886/api",
      ws: true,
      changOrigin: true,
      pathRewrite: {
        "^/api": "/",
      },
    },
  },
}

番外：webpack.config.js和vue.config.js的区别

参考：创建vue项目后没有webpack.config.js文件如何解决

webpack.config.js是webpack的配置文件，所有使用webpack作为打包工具的项目都可以使用，vue的项目可以使用，react的项目也可以使用。

vue.config.js是vue项目的配置文件，专用于vue项目。通过vue.config.js中常用功能的配置，简化了配置工作，当然如果需要更专业的配置工作，两者在vue项目中是可以并存的。

vue-cli3创建的时候并不会自动创建vue.config.js,因为这个是可选项，所以一般都是修改webpack的时候才会自己创建一个vue.config.js。

再然后因为vue-cli3内部高度集成了webpack，一般来说使用者不需要再去对webpack配置什么，所以没有暴露webpack的配置文件，但你依然可以创建vue.config.js去修改默认的webpack。

🌿 参考资料：一文聊透vue配置文件——vue.config.js

Vue-cli之vue.config.js | vue.config.js详解 | 配置参考 | Vue CLI