vue.config.js常用配置详解
时间: 2023-12-30 09:24:50 浏览: 128
vue.config.js配置介绍
以下是vue.config.js常用配置的一些示例:
1. 修改输出目录
```javascript
module.exports = {
outputDir: 'dist' // 将构建好的文件输出到dist目录下
}
```
2. 配置代理
```javascript
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000', // 将/api开头的请求代理到本地的3000端口
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
```
3. 自定义webpack配置
```javascript
module.exports = {
configureWebpack: {
// 自定义webpack配置
resolve: {
alias: {
'@': path.resolve(__dirname, 'src') // 设置@为src目录的别名
}
}
}
}
```
4. 添加全局样式
```javascript
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import "@/styles/variables.scss";` // 在每个组件中都可以使用全局的变量
}
}
}
}
```
5. 配置打包分析
```javascript
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
configureWebpack: {
plugins: [
new BundleAnalyzerPlugin() // 打包分析
]
}
}
```
阅读全文