vue-vue.config.js
vue项目的配置文件位置内容vue2.0的版本目录结构已经变化了,没有了之前build与config文件夹,因此如果需要配置build的生成目录等打包需求,需要vue.config.js位置vue.config.js文件在项目的根目录下,与src平级内容//主要是用于分析项目的大小占比的,不需要的话可以注释掉// const WebpackBundleAnalyzerPlugin = requir
·
vue2.0的版本目录结构已经变化了,没有了之前build与config文件夹,因此如果需要配置build的生成目录等打包需求,需要vue.config.js
位置
vue.config.js文件在项目的根目录下,与src平级
内容
//主要是用于分析项目的大小占比的,不需要的话可以注释掉
// const WebpackBundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
// 部署应用时的基本 URL
//部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)cli3.0以上使用publicPath替代baseUrl,解决build后找不到静态资源的问题
publicPath: process.env.NODE_ENV == "production" ? '../' : '',
// build时构建文件的目录 构建时传入 --no-clean 可关闭该行为
outputDir: process.env.NODE_ENV == "production" ? "../dist" : "dist", // 运行时生成的生产环境构建文件的目录(默认''dist'',构建之前会被清除)
// build时放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录(默认'')
assetsDir: "assets",
// 指定生成的 index.html 的输出路径 (相对于 outputDir),也可以是一个绝对路径。
indexPath: 'index.html',
// 默认在生成的静态资源文件名中包含hash以控制缓存
filenameHashing: true,
// 是否在开发环境下通过 eslint-loader 在每次保存时 lint 检查代码(在生产构建时禁用 eslint-loader)
lintOnSave: process.env.NODE_ENV !== 'production',
// 是否使用包含运行时编译器的 Vue 构建版本
runtimeCompiler: false,
// 生产环境是否生成 sourceMap 文件,如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建
productionSourceMap: false,
// Babel 显式转译列表,暂时没有用到
transpileDependencies: [],
// 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性(注:仅影响构建时注入的标签)
crossorigin: '',
// 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)
integrity: false,
// 构建多页面应用,页面的配置,一般用不到
pages: {
index: {
// page 的入口
entry: 'src/index/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/subpage/main.js'
},
devServer: {
//所有 webpack-dev-server 的选项都支持。
//主要是用于交互接口的调试
disableHostCheck: true,
host: "0.0.0.0", //localhost
port: 8080,
https: false,
hotOnly: false,
open: true, //配置自动启动浏览器
overlay: {
//配置eslint报错的级别
// warnings: true,
// error: true
},
proxy: {
// 配置多个代理(配置一个 proxy: 'http://localhost:4000' // 本地模拟数据服务器)
// "/dd": {
// target: "http://10.64.88.27:8088/",
// ws: true,
// changeOrigin: true
// },
// "/dd": {
// target: "http://10.64.90.8:8088/",//10.64.90.46
// ws: true,
// changeOrigin: true
// },
"/dd": {
target: "https://direct.cn",//431
ws: true,
changeOrigin: true
},
}
},
// 如果这个值是一个对象,则会通过 webpack-merge 合并到最终的配置中
// 如果你需要基于环境有条件地配置行为,或者想要直接修改配置,那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内,你可以直接修改配置,或者返回一个将会被合并的对象
configureWebpack: {
// plugins: [new WebpackBundleAnalyzerPlugin()]
},
// 对内部的 webpack 配置(比如修改、增加Loader选项)(链式操作)
chainWebpack: (config) => {
// if (IS_PROD) {
//主要是对打包的文件生成配置,可以将某些引用的第三方插件单独打包出来
config.optimization.splitChunks({
minSize: 30000, //依赖包超过300000bit将被单独打包
minChunks: 1, // 模块的最小被引用次数
// maxAsyncRequests: 5, // 按需加载的最大并行请求数
// maxInitialRequests: 3, // 一个入口最大并行请求数
// automaticNameDelimiter: '~', // 文件名的连接符
name: true,
cacheGroups: {
common: {
name: 'chunk-common', // 打包后的文件名
chunks: 'initial', //可选值有:'all'(所有代码块),'async'(按需加载的代码块),'initial'(初始化代码块)
maxInitialRequests: 5,
priority: 1,//缓存组打包的先后优先级,数值大的优先
reuseExistingChunk: true//如果当前代码块包含的模块已经有了,就不在产生一个新的代码块
},
vendors: {
name: 'chunk-vendors',
test: /[\\/]node_modules[\\/]/,
chunks: 'initial',
priority: 2,
reuseExistingChunk: true,
enforce: true
},
antDesignVue: {
name: 'chunk-ant-design-vue',
test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/,
chunks: 'initial',
priority: 3,
reuseExistingChunk: true,
enforce: true
},
moment: {
name: 'moment',
test: /[\\/]node_modules[\\/]moment[\\/]/,
chunks: 'initial',
priority: 4,
reuseExistingChunk: true,
enforce: true
},
coreJs: {
name: 'chunk-core-js',
test: /[\\/]node_modules[\\/]core-js[\\/]/,
chunks: 'initial',
priority: 5,
reuseExistingChunk: true,
enforce: true
}
// styles: {
// name: 'styles',
// test: /\.(sa|sc|c)ss$/,
// chunks: 'all',
// enforce: true,
// },
}
})
// }
},
// css的处理
css: {
// 当为true时,css文件名可省略 module 默认为 false
modules: true,
// 是否将组件中的 CSS 提取至一个独立的 CSS 文件中
// 默认生产环境下是 true,开发环境下是 false
//是否使用css分离插件 ExtractTextPlugin 开启CSS分离之后每个组件的css会单独打包,造成页面上有大量请求,所以在正式环境中将CSS分离关闭
extract: process.env.NODE_ENV == "production" ? true : false,
// 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能
sourceMap: false,
// requireModuleExtension: false,// 启用 CSS modules for all css / pre-processor files.
//向 CSS 相关的 loader 传递选项(支持 css-loader postcss-loader sass-loader less-loader stylus-loader)
//css预设器配置项
loaderOptions: {
css: {},
less: {
javascriptEnabled: true
}}
},
// 是否为 Babel 或 TypeScript 使用 thread-loader 一般用不到
parallel: require('os').cpus().length > 1,
// 向 PWA 插件传递选项 一般用不到
pwa: {},
// 可以用来传递任何第三方插件选项 一般用不到
pluginOptions: {}
}
案例:
// const WebpackBundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
publicPath: process.env.NODE_ENV == "production" ? '../' : '',// 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)cli3.0以上使用publicPath替代baseUrl,解决build后找不到静态资源的问题
runtimeCompiler: process.env.NODE_ENV == "production" ? false : true, //是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右。
outputDir: process.env.NODE_ENV == "production" ?"../dist":"dist", // 运行时生成的生产环境构建文件的目录(默认''dist'',构建之前会被清除)
assetsDir: "assets", //放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认'')
indexPath: "index.html", //指定生成的 index.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。
filenameHashing: true,
lintOnSave: true, // 是否在保存的时候检查
productionSourceMap: false, // 生产环境是否生成 sourceMap 文件,如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建
devServer: {
//所有 webpack-dev-server 的选项都支持。
disableHostCheck: true,
host: "0.0.0.0", //localhost
port: 8080,
https: false,
hotOnly: false,
open: true, //配置自动启动浏览器
overlay: {
//配置eslint报错的级别
// warnings: true,
// error: true
},
proxy: {
// 配置多个代理(配置一个 proxy: 'http://localhost:4000' // 本地模拟数据服务器)
// "/dd": {
// target: "http://10.66.88.27:8088/",
// ws: true,
// changeOrigin: true
// },
// "/dd": {
// target: "http://10.66.90.8:8088/",//10.64.90.46
// ws: true,
// changeOrigin: true
// },
"/dd": {
target: "https://direct.view.cn",//431
ws: true,
changeOrigin: true
},
}
},
// configureWebpack: {
// plugins: [new WebpackBundleAnalyzerPlugin()]
// },
chainWebpack(config) {
// if (IS_PROD) {
config.optimization.splitChunks({
minSize: 30000, //依赖包超过300000bit将被单独打包
minChunks: 1, // 模块的最小被引用次数
// maxAsyncRequests: 5, // 按需加载的最大并行请求数
// maxInitialRequests: 3, // 一个入口最大并行请求数
// automaticNameDelimiter: '~', // 文件名的连接符
name: true,
cacheGroups: {
common: {
name: 'chunk-common', // 打包后的文件名
chunks: 'initial', //可选值有:'all'(所有代码块),'async'(按需加载的代码块),'initial'(初始化代码块)
maxInitialRequests: 5,
priority: 1,//缓存组打包的先后优先级,数值大的优先
reuseExistingChunk: true//如果当前代码块包含的模块已经有了,就不在产生一个新的代码块
},
vendors: {
name: 'chunk-vendors',
test: /[\\/]node_modules[\\/]/,
chunks: 'initial',
priority: 2,
reuseExistingChunk: true,
enforce: true
},
antDesignVue: {
name: 'chunk-ant-design-vue',
test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/,
chunks: 'initial',
priority: 3,
reuseExistingChunk: true,
enforce: true
},
moment: {
name: 'moment',
test: /[\\/]node_modules[\\/]moment[\\/]/,
chunks: 'initial',
priority: 4,
reuseExistingChunk: true,
enforce: true
},
coreJs: {
name: 'chunk-core-js',
test: /[\\/]node_modules[\\/]core-js[\\/]/,
chunks: 'initial',
priority: 5,
reuseExistingChunk: true,
enforce: true
}
// styles: {
// name: 'styles',
// test: /\.(sa|sc|c)ss$/,
// chunks: 'all',
// enforce: true,
// },
}
})
// }
},
css: {
//是否使用css分离插件 ExtractTextPlugin 开启CSS分离之后每个组件的css会单独打包,造成页面上有大量请求,所以在正式环境中将CSS分离关闭
extract: process.env.NODE_ENV == "production" ? true : false,// 是否将组件中的 CSS 提取至一个独立的 CSS 文件中
sourceMap: false,// 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能
// requireModuleExtension: false,// 启用 CSS modules for all css / pre-processor files.
loaderOptions: { //css预设器配置项
// 向 CSS 相关的 loader 传递选项
less: {
javascriptEnabled: true
}
}
}
};
更多推荐
已为社区贡献24条内容
所有评论(0)