vue-cli 项目打包优化-基础篇

1、项目打包完运行空白

引用资源路径问题,打包完的【index.html】文件引用其他文件的引用地址不对

参考配置:https://cli.vuejs.org/zh/config

修改vue.config.js ,根据与 后端 或 运维 沟通修改

js 复制代码
module.export = {
	// 默认 publicPath: '/'
    // 打包自测阶段可改为 './',实际值根据 后端或运维 沟通决定
	publicPath: './'
}
2、路由

路由模式hashhistory

  • 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、根据文件大小类型选择进一步优化
}

参考视频地址:https://www.bilibili.com/video/BV1wt421p7yM

相关推荐
周全全6 个月前
从零开始搭建一个vue项目
vue·vue-cli
下雪天的夏风10 个月前
vue 项目 index.html 中使用环境变量
前端·javascript·vue.js·html·vite·环境变量·vue-cli
sweetheart7-71 年前
前端框架Vue学习 ——(五)前端工程化Vue-cli脚手架
前端·vue.js·前端框架·vue-cli
落落叶叶无声1 年前
vue-cli 输出的模板 html 文件使用条件语句
html·条件语句·模板·vue-cli·webpackplugin
下雪天的夏风1 年前
vue-cli 下的 CSS Modules
前端·css·vue.js·vue-cli
下雪天的夏风1 年前
vue-cli@4.x快速原型开发功能
前端·javascript·vue.js·vue-cli
我可以将你更新哟1 年前
vue-cli创建项目、vue项目目录结(运行vue项目)、ES6导入导出语法、vue项目编写规范
前端·vue.js·es6·vue-cli·vue-cli-ui·serve
@素素~1 年前
入门vue——创建vue脚手架项目 以及 用tomcat和nginx分别部署vue项目(vue2)
vue.js·nginx·vue·vue-cli