vue-cli 4.2.3中vue.config.js 配置常用参数(webpack)
截止到2020.3.17,vue-cli版本已经到了4.2.3
·
截止到2020.3.19,vue-cli版本已经到了4.2.3,以下为常用的参数及介绍。
const path = require("path");
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? './'//生产环境,路径为网站的子路径
: '/',//开发环境下
outputDir:'dist',//生产环境下的打包路径
assetsDir:"aa",//生产环境下的静态资源css,js,img存放路径
indexPath:"index.html",//生产环境下的index.html的路径,默认index.html
filenameHashing:true,//生产环境下的打包文件的哈希后缀,默认true,哈希后缀是为了浏览器缓存
pages: {
index: {
// page 的入口
entry: 'src/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时,
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// 在这个页面中包含的块,默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 当使用只有入口的字符串格式时,
// 模板会被推导为 `public/subpage.html`
// 并且如果找不到的话,就回退到 `public/index.html`。
// 输出文件名会被推导为 `subpage.html`。
subpage: 'src/main.js'
},
lintOnSave:true,//是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
//浏览器报以下错时,设置runtimeCompiler: true
//You are using the runtime-only build of Vue where the template compiler is not available.
// Either pre-compile the templates into render functions, or use the compiler-included build.
runtimeCompiler: true,//是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是会打包资源增加 10kb 左右
transpileDependencies:[],//通过babel显示转译依赖,可以在该列表列出来
productionSourceMap:true,//生产环境下 会生成source map,用来在浏览器中F12 sources打断点,调试代码,默认是true,设置为false,可以加速生产打包过程,无法调试
crossorigin:"",//设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性,anonymous或者""(不需要用户凭证,允许跨域),use-credentials(需要用户凭证)
//开启integrity<script> 标签上启用 Subresource Integrity (SRI)。如果你构建后的文件是部署在 CDN 上的,启用该选项可以提供额外的安全性
// integrity:"sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC",
css:{
sourceMap:false,//默认是false
loaderOptions:{}
},
//webpack 所有的选项都支持
devServer:{
host: '0.0.0.0',
port: 8090,//端口
open: true,//自动启动浏览器
//服务代理
proxy:{
'/api': {
target: 'http://www.baidu.com',
ws: true,
changeOrigin: true
},
}
},
//传递第三方插件
pluginOptions:{
jQuery: {
}
},
// webpack配置 - 简单配置方式
configureWebpack: {
resolve: {
alias: {
// 别名
"@api": path.resolve(__dirname, "./src/api"),
"@utils": path.resolve(__dirname, "./src/utils"),
"jQuery": "jquery"
}
},
//插件
plugins: [
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery'
})
]
},
}
更多推荐
已为社区贡献18条内容
所有评论(0)