cli config官网地址：https://cli.vuejs.org/zh/config/
当前使用vue2.6+ cli4.5.4版本；打包的vue.config配置文件，包括多页面配置，打包后图片配置域名地址，修改打包后js文件名等；
module.exports = {
// 项目部署的基础路径
// 我们默认假设你的应用将会部署在域名的根部，
// 比如 https://www.my-app.com/
// 如果你的应用时部署在一个子路径下，那么你需要在这里
// 指定子路径。比如，如果你的应用部署在
// https://www.foobar.com/my-app/
// 那么将这个值改为 `/my-app/`
publicPath: process.env.NODE_ENV === "production" ? "./" : "/", /*这个是我存放在github在线预览的Reader项目*/
// 将构建好的文件输出到哪里（或者说将编译的文件）
outputDir: 'dist',
// 放置静态资源的地方 (js/css/img/font/...)
assetsDir: '',
// 用于多页配置，默认是 undefined
pages: {
// index: {
// // 入口文件
// entry: 'src/main.js', /*这个是根入口文件*/
// // 模板文件
// template: 'public/index.html',
// // 输出文件
// filename: 'index.html',
// // 页面title
// title: 'Index Page',
// chunks: ['chunk-vendors', 'chunk-common', 'index']
// },
// sec: {
// entry: 'src/mains/sec/sec.js',
// template: 'public/sec.html',
// filename: 'sec.html',
// title: 'sec Page',
// chunks: ['chunk-vendors', 'chunk-common', 'sec']
// },
// index: {
// entry: "./src/pages/index/index.js", // 配置入口js文件
// template: "./src/pages/index/index.html", // 主页面
// filename: "index.html", // 打包后的html文件名称
// title: "首页", // 打包后的.html中<title>标签的文本内容
// // 在这个页面中包含的块，默认情况下会包含
// // 提取出来的通用 chunk 和 vendor chunk。
// chunks: ['chunk-vendors', 'chunk-common', 'index']
// },
// baicai: {//新增的部份
// entry: "./src/pages/baicai/baicai.js", // 配置入口js文件
// template: "./src/pages/baicai/baicai.html", // 主页面
// filename: "baicai.html", // 打包后的html文件名称
// title: "首页", // 打包后的.html中<title>标签的文本内容
// // 在这个页面中包含的块，默认情况下会包含
// // 提取出来的通用 chunk 和 vendor chunk。
// chunks: ['chunk-vendors', 'chunk-common', 'baicai']
// },
loginpage: {
entry: 'src/pages/login/login.js',
// template: './index.html',
template: 'src/pages/login/login.html',
filename: 'login.html',
title: 'login Page',
// chunks: ['chunk-vendors', 'chunk-common', 'loginpage']
},
firstpage: {
entry: 'src/pages/firstpage/firstpage.js',
template: 'src/pages/firstpage/firstpage.html',
// template: 'public/firstpage.html',
filename: 'firstpage.html',
title: 'firstpage Page',
// chunks: ['chunk-vendors', 'chunk-common', 'firstpage']
},
secondpage: {
entry: 'src/pages/secondpage/secondpage.js',
template: 'src/pages/secondpage/secondpage.html',
// template: 'public/secondpage.html',
filename: 'secondpage.html',
title: 'secondpage Page',
// chunks: ['chunk-vendors', 'chunk-common', 'secondpage']
}
// 简写格式
// 模板文件默认是 `public/subpage.html`
// 如果不存在，就是 `public/index.html`.
// 输出文件默认是 `subpage.html`.
// subpage: 'src/main.js' /*注意这个是*/
},
// 是否在保存的时候使用 `eslint-loader` 进行检查。
// 有效的值：`ture` | `false` | `"error"`
// 当设置为 `"error"` 时，检查出的错误会触发编译失败。
lintOnSave: true,
// 使用带有浏览器内编译器的完整构建版本
// 查阅 https://cn.vuejs.org/v2/guide/installation.html#运行时-编译器-vs-只包含运行时
runtimeCompiler: false,
// babel-loader 默认会跳过 node_modules 依赖。
// 通过这个选项可以显式转译一个依赖。
transpileDependencies: [/* string or regex */],
// 是否为生产环境构建生成 source map？
productionSourceMap: !process.env.NODE_ENV === "production" ,
// 去除打包后 hash值
filenameHashing:false,
// 调整内部的 webpack 配置。
// 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/webpack.md
chainWebpack: (config) => {
config
.module
.rule("images")
.test(/\.(jpg|png|gif)$/)
.use("url-loader")
.loader("url-loader")
.options({
limit:10,
// 以下配置项用于配置file-loader
// 根据环境使用cdn或相对路径
publicPath: process.env.NODE_ENV === 'development' ? '/img' : 'http://dj-vue.com/vue/img',
// 将图片打包到dist/img文件夹下, 不配置则打包到dist文件夹下
outputPath: 'img',
// 配置打包后图片文件名
name: '[name].[ext]',
}).end();
// config
// .module
// .rule("media")
// .test(/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/)
// .use("url-loader")
// .loader("url-loader")
// .options({
// // // limit:10,
// // // 以下配置项用于配置file-loader
// // // 根据环境使用cdn或相对路径
// // // publicPath: process.env.NODE_ENV === 'production' ? 'https://oss.yy.com/video' : './video',
// publicPath: process.env.NODE_ENV === 'production' ? 'https://oss.yy.com/video' : './',
// // outputPath: 'video',
// // // 配置打包后图片文件名
// name: '[name].[ext]',
// }).end();
},
// configureWebpack: () => {},
// 修改打包后js文件名
configureWebpack: { // webpack 配置
output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.js】
filename: `js/[name].vw.js`,
chunkFilename: `js/[name].vw.js`
// chunkFilename: `js/[id].vw.js`
},
// 修改打包后css文件名
// plugins: [
// new MiniCssExtractPlugin({
// filename: `css/[name].vw.css`,
// // chunkFilename: `css/[name].${conf.version}.css`
// })
// ]
},
// CSS 相关选项
css: {
// 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)
// 也可以是一个传递给 `extract-text-webpack-plugin` 的选项对象
extract: true,
// 是否开启 CSS source map？
sourceMap: false,
// 为预处理器的 loader 传递自定义选项。比如传递给
// sass-loader 时，使用 `{ sass: { ... } }`。
loaderOptions: {},
// 为所有的 CSS 及其预处理文件开启 CSS Modules。
// 这个选项不会影响 `*.vue` 文件。
modules: false
// requireModuleExtension: false
},
// 在生产环境下为 Babel 和 TypeScript 使用 `thread-loader`
// 在多核机器下会默认开启。
parallel: require('os').cpus().length > 1,
// PWA 插件的选项。
// 查阅 https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plugin-pwa
pwa: {},
// 配置 webpack-dev-server 行为。
devServer: {
index: 'firstpage.html', //默认启动serve 打开firstpage页面
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
// 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理
proxy: {
'/api': {
target: 'http://localhost:8880',
changeOrigin: true,
secure: false,
// ws: true,
pathRewrite: {
'^/api': '/static/mock' // 请求数据路径别名,这里是注意将static/mock放入public文件夹
}
}
},
before: app => {}
},
// 三方插件的选项
pluginOptions: {
// ...
'process.env':{
NODE_ENV:'"development"'
}
}
}vue.config.js
备注：打包修改js文件后缀名称需要注意以下几点；
1:去掉hash值
// 去除打包后 hash值
filenameHashing:false,2:修改js、；
// 修改打包后js文件名
configureWebpack: { // webpack 配置
output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.js】
filename: `js/[name].vw.js`,
chunkFilename: `js/[name].vw.js`
// chunkFilename: `js/[id].vw.js`
},
// 修改打包后css文件名
// plugins: [
// new MiniCssExtractPlugin({
// filename: `css/[name].vw.css`,
// // chunkFilename: `css/[name].${conf.version}.css`
// })
// ]
},2-1css后缀；
// CSS 相关选项
css: {
// 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)
// 也可以是一个传递给 `extract-text-webpack-plugin` 的选项对象
// 修改打包后css文件名
// extract: true,
extract:{
filename: `css/[name].[chunkhash].vw.css`,
chunkFilename: `css/[name].[chunkhash].vw.css`
},
// 是否开启 CSS source map？
sourceMap: false,
// 为预处理器的 loader 传递自定义选项。比如传递给
// sass-loader 时，使用 `{ sass: { ... } }`。
loaderOptions: {},
// 为所有的 CSS 及其预处理文件开启 CSS Modules。
// 这个选项不会影响 `*.vue` 文件。
modules: false
// requireModuleExtension: false
},
3:设置了 filenameHashing:false后 chunk 文件还是没有修改成功这时候需要修改 路由；
添加
/* webpackChunkName: "chunk-login" */打包时候chunk名称就会发生变化；import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/login.html',
name: 'login',
component: () => import( /* webpackChunkName: "chunk-login" */'./components/login.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
作用就是webpack在打包的时候，使用异步路由以及异步引入的库代码进行代码分割时（需要配置webpack的SplitChunkPlugin插件），为分割后的代码块取得名字。
另外 import()异步加载的写法实现页面模块lazy loading懒加载（Vue中的路由异步加载）：
Vue中运用import的懒加载语句以及webpack的魔法注释，在项目进行webpack打包的时候，对不同模块进行代码分割，加载时，用到哪个模块再加载哪个模块，实现懒加载进行页面的优化。
动态import()打包出来文件的name是0.js,1.js,2.js,3.js ...依次排列,有时候我们希望打包出来的文件名是打包前的文件名称，要实现这，需要经历3各步骤：
1.在webpack配置文件中的output中添加chunkFilename。命名规则根据自己的项目来定，其中[name]就是文件名，这一块更详细的说明请点击这里。
//其他代码..
output:{
path: path.resolve(__dirname,'public'),
filename:'[name].[hash:8].js',
chunkFilename:'[name].[hash:8].js'
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
