1、项目打包完运行空白
引用资源路径问题,打包完的【index.html】文件引用其他文件的引用地址不对
参考配置:https://cli.vuejs.org/zh/config
修改vue.config.js
,根据与 后端 或 运维 沟通修改
js
module.export = {
// 默认 publicPath: '/'
// 打包自测阶段可改为 './',实际值根据 后端或运维 沟通决定
publicPath: './'
}
2、路由
路由模式 : hash
、 history
- hash:地址携带
#
,正常打包可访问,前端测试开发阶段使用 - history:地址栏会改变,可以使用浏览器的【返回】按钮,需要服务器端的支持,需要【后端或运维】做相关配置,做一下路径重定向问题
路由懒加载
js
export const Routes = [
{
path: '/xxx',
component: Xxxx,
children: [
{
// 懒加载写法
component: () => import('@/xxx/xxx')
}
]
},
...
]
3、环境变量
参考文档:https://cli.vuejs.org/zh/guide/mode-and-env.html
根目录下新建【.env.development】【.env.production】【.env.test】,生产、开发、测试环境
- 【NODE_ENV】,【BASE_URL 】是默认的环境变量可访问无法被修改,【NODE_ENV】代表当前的环境模式,【BASE_URL】代表的是当前根路径
- 自定义环境变量规则:必须以【VUE_APP_】 开头 否则无效
- 访问方式:在开发中通过 【process.env.变量名称】的方式获取变量值
js
# 开发环境配置
NODE_ENV = 'development'
# 页面标题
VUE_APP_TITLE = 'xxx'
# 开发环境
VUE_APP_BASE_API = '/dev-api'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true
根据不同环境做相应的配置
4、安装可视化插件
npm install webpack-bundle-analyzer
js
const BundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
// 写法一
configureWebpack: {
plugins: [
new BundleAnalyzer()
]
}
// 写法二
configureWebpack:config=>{
config.plugins.push(
new BundleAnalyzer()
)
}
}
5、配置 vue.config.js
js
module.exports = {
// 1、生产模式下打包不生成map映射文件(调试代码时显示代码错误行数,文件很大)
productionSourceMap: false,
// 2、拆分app.js文件,路由写成懒加载模式,页面js会从app.js拆分出去
// 2.1、代码总体体积变大,但加载速度提升
// 3、拆分vendors.js,依赖文件(vue、vue-router、vueX、element-ui等)
// 3.1、ui组件按需引入,自动化引入
// 4、代码压缩、图片压缩
// 5、cdn
// 6、根据文件大小类型选择进一步优化
}