基于vue/cli3.0+脚手架搭建Vue项目(12)
前言
一、webpack配置
1.配置vue.config.js
publicPath: './',
outputDir: 'dist',
assetsDir:"static",
indexPath:'index.html',
2.配置DllPlugin提高构建和打包速度
1:项目根目录新建dll.js文件
const path = require('path')
const webpack = require('webpack')
module.exports = {
entry: {
vendor: [ 'vue-router', 'element-ui']
},
output: {
// 配置输出文件存放在本地的目录
path: path.join(__dirname, 'dllFiles'),
filename: '[name].js',
library: '[name]_[hash]'
},
plugins: [
new webpack.DllPlugin({
// DllPlugin的name属性需要和libary保持一致
name: '[name]_[hash]',
//指定当前目录
path: path.join(__dirname, '.', '[name]-manifest.json'),
// context需要和webpack.config.js保持一致
context: __dirname
})
]
}
2:webpack-cli依赖的安装
npm install webpack-cli -D
3:package.json文件的scripts
内添加dll
运行命令行,顺便注意下面的"build": "vue-cli-service build --no-module"
,添加了后缀 --no-module
,因为@vue/cli-service
版本过高可能会让npm run build
执行两遍打包,自己选择是否追加后缀 --no-module
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --no-module",
"dll": "webpack --config ./dll.js"
},
运行指令:
npm run dll
此时会在根目录生成vendor-manifest.json
文件和dllFiles
文件夹
4:根目录的webpack.config.js文件配置dll(tip:也可以用vue.config.js文件configureWebpack配置)
module.exports = {
// ...其他配置
// 配置dll
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
// manifest就是我们第3步中打包出来的json文件
manifest: require('./vendor-manifest.json'),
})
]
}
二、打包验证
运行指令:
npm run build
打包好的文件部署在服务端后:
运行服务地址:http://47.106.123.118:8080/#/,获取登录页面账号和密码可查看之前文章:vue项目axios的封装和使用
总结
要想把生人变成熟人,就要找到这个人的熟人。