如果需要自己写的项目上线的,需要我们对项目进行优化!
1、文件路径修改
打包项目的时候,没有对路径做出处理的话,出来的路径是从根目录开始的,会导致我们使用本地服务器测试的时候找不到所需文件,所以需要我们对路径进行处理:
在 vue.config.js 里面配置:
module.exports = {
publicPath: './'
}
// 这个做处理后原来路径以根路径开始的,就会更改为以当前文件进行
// 这样就可以找到我们所需的文件
2、map文件的删除
map 文件是打包后带的,我们可以进行精准的定位文件出的错误,不过我们一般不需要这个map文件,可以在打包之前就可以让map文件不进行打包:
在 vue.config.js 里面配置:
module.exports = {
productionSourceMap: false
}
// 设置完之后打包,就不会在有map文件
3、接口处理
如果我们在的基地址是本地服务器的话,我们打包后就没有效果了,所以我们要对接口进行处理,我们可以在项目的根目录下创建两个文件,用来判断我们的环境:
.env.development 文件里配置开发环境的基地址:
NODE_ENV=development
VUE_APP_API='本地服务器基地址'
.env.production 文件里配置生产环境的基地址:
NODE_ENV=production
VUE_APP_API='生产环境的基地址'
配置完后就可以在我们封装的axios的文件里面将 baseURL 进行修改,使用 node 的方法,根据不同的环境会配置不同的基地址:
const api = axios.create({
baseURL: process.env.VUE_APP_API,
timeout: 5000
})
4、抽离项目配置文件
如果不抽离一些大的配置文件 (比如:element ui ,echart 等),打包的时候,打包后的文件也较大,所以我们需要抽离这些配置文件:
在 vue.config.js 里面配置:
module.exports = {
chainWebpack: config => {
// node 的方法判断当前环境是生产环境的话,我们就对配置文件进行抽离
config.when(process.env.NODE_ENV === 'production', config => {
// 指定生产环境的mian.js 的文件
config.entry('app').clear().add('./src/main-prod.js')
// externals 里面配置需要抽离的配置文件
config.set('externals', {
'vue': 'Vue',
'echarts': 'echarts',
'element-ui': 'ELEMENT',
'vue-quill-editor': 'VueQuillEditor'
})
config.plugin('html').tap(args => {
return args
})
})
// 也可以不对开发环境进行处理
config.when(process.env.NODE_ENV === 'development', config => {
config.entry('app').clear().add('./src/main.js')
config.plugin('html').tap(args => {
return args
})
})
},
}
// 注意事项就是我们抽离的时候,键值对是个mian.js里面的是相反的,
// 还有注意的是如element ui ,这个因为CDN的js文件导出的是ELEMENT 所以这个我们需要更改
抽离后,我们就需要在项目根目录下的 pulic 里面的index.html将我们抽离配置文件,用对应官方给的CDN 进行引入样式,引入组件库,不然我们打包后,抽离的配置文件因为没有对应的样式和一些组件库,我们测试就出不来效果,可能还会报错,
5、路由注意事项
我们需要使用哈希路由或者默认路由,不能是用history路由,不然会出一些问题,比如点击路由跳转没有效果,而且还会报错,还有可能直接白屏
6、删除 console.log 控制台打印
我们要下载一个插件用来删除 console,
cnpm i babel-plugin-transform-remove-console -D
然后再项目根目录下 babel.config.js 文件中配置:
const prodPlugins = [];
if (process.env.NODE_ENV === 'production') {
prodPlugins.push('transform-remove-console');
}
module.exports = {
presets: [
// 这个如果用不了就使用 '@vue/app'
'@vue/cli-plugin-babel/preset'
],
plugins: [
...prodPlugins
]
}
配置完后,打包的项目中就没有console了