配置vue.config.js文件

最新推荐文章于 2025-10-11 19:30:31 发布

原创最新推荐文章于 2025-10-11 19:30:31 发布 · 313 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue3项目搭建专栏收录该内容

10 篇文章

订阅专栏

本文介绍了Vue3项目的基本结构，并详细讲解了vue.config.js的三种配置方式，包括公共路径、输出目录和代理设置。同时，解释了tsconfig.json文件的配置项，如目标代码版本、模块系统、严格模式和类型别名等，这些对于TypeScript项目的编译和类型检查至关重要。

配置vue.config.js文件

项目结构

vue3-ts-cms
├─ .browserslistrc
├─ .editorconfig
├─ .eslintrc.js
├─ .gitignore
├─ .prettierignore
├─ .prettierrc
├─ babel.config.js
├─ package-lock.json
├─ package.json
├─ public
│  ├─ favicon.ico
│  └─ index.html
├─ README.md
├─ src
│  ├─ App.vue
│  ├─ assets
│  │  └─ logo.png
│  ├─ components
│  ├─ main.ts
│  ├─ shims-vue.d.ts
├─ tsconfig.json
├─ vue.config.js

创建vue.config.js文件

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

vue.config.js有三种配置方式：

方式一：直接通过CLI提供给我们的选项来配置：
- 比如publicPath：配置应用程序部署的子目录（默认是 /，相当于部署在 https://www.my-app.com/）；
- 比如outputDir：修改输出的文件夹；
方式二：通过configureWebpack修改webpack的配置：
- 可以是一个对象，直接会被合并；
- 可以是一个函数，会接收一个config，可以通过config来修改配置；
方式三：通过chainWebpack修改webpack的配置：
- 是一个函数，会接收一个基于 webpack-chain 的config对象，可以对配置进行修改；

module.exports = {
  outputDir: './dist',
  // publicPath: './',
  devServer: {
    // 代理
    proxy: {
      '^/api': {
        target: 'https://www.fastmock.site/mock/89efb181f2e22e0b4044eee348889b6e/kjhs',
        pathRewrite: {
          '^/api': ''
        },
        changeOrigin: true
      }
    }
  }

  // 方式二
  // configureWebpack: {
  //   resolve: {
  //     alias: {
  //       views: '@/components'
  //     }
  //   }
  // }
  // configureWebpack: (config) => {
  //   config.resolve.alias = {
  //     '@': path.resolve(__dirname, 'src'),
  //     views: '@/views'
  //   }
  // }

  // 方式三
  // chainWebpack: (config) => {
  //   config.resolve.alias.set('@', path.resolve(__dirname, 'src')).set('components', '@/components')
  // }
}

解释tsconfig.json文件

{
  "compilerOptions": {
    // 目标代码(ts -> js(es5/6/7))
    "target": "esnext",
    // 目标代码需要使用的模块化方案(commonjs require/module.exports/es module import/export)
    "module": "esnext",
    // 严格一些严格的检查(any)
    "strict": true,
    // 对jsx进行怎么样的处理
    "jsx": "preserve",
    // 辅助的导入功能
    "importHelpers": true,
    // 按照node的方式去解析模块 import "/index.node"
    "moduleResolution": "node",
    // 跳过一些库的类型检测 (axios -> 类型/ lodash -> @types/lodash / 其他的第三方)
    // import { Person } from 'axios'
    "skipLibCheck": true,
    // export default/module.exports = {}
    // es module 和 commonjs
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    // 要不要生成映射文件(ts -> js)
    "sourceMap": true,
    // 文件路径在解析时, 基本url
    "baseUrl": ".",
    // 指定具体要解析使用的类型
    "types": ["webpack-env"],
    // 路径解析(类似于webpack alias)
    "paths": {
      "@/*": ["src/*"],
      "components/*": ["src/components/*"]
    },
    // 可以指定在项目中可以使用哪里库的类型(Proxy/Window/Document)
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}