vue.config.js配置webpack
时间: 2023-10-28 09:23:46 浏览: 102
Vue CLI通过vue.config.js文件来配置webpack。你可以在项目根目录下创建一个名为vue.config.js的文件,并在其中导出一个对象来配置webpack。
下面是一个示例的vue.config.js文件:
```javascript
module.exports = {
// 基本路径
publicPath: process.env.NODE_ENV === 'production'
? '/my-app/'
: '/',
// 输出文件目录
outputDir: 'dist',
// 静态资源目录 (js, css, img, fonts)
assetsDir: 'assets',
// 是否开启eslint保存检测,有效值:true | false | 'error'
lintOnSave: process.env.NODE_ENV !== 'production',
// webpack配置
configureWebpack: {
// 自定义webpack配置
},
// 生产环境是否生成 sourceMap 文件
productionSourceMap: true,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {
sass: {
// 设置全局scss变量
prependData: `@import "@/styles/variables.scss";`
}
}
},
// webpack-dev-server 相关配置
devServer: {
open: true,
host: 'localhost',
port: 8080,
https: false,
hotOnly: false,
proxy: null, // 设置代理
before: app => {}
},
// 第三方插件配置
pluginOptions: {
// ...
}
}
```
你可以根据需要在该文件中配置各种选项来定制webpack行为。更多详细的配置选项可以查阅Vue CLI官方文档。
阅读全文