配置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:修改输出的文件夹;
- 比如publicPath:配置应用程序部署的子目录(默认是
- 方式二:通过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"]
}