雄县有做网站的吗,查看网站是什么语言做的,代刷开通建设网站,网站开发项目心得1、项目打包完运行空白
引用资源路径问题#xff0c;打包完的【index.html】文件引用其他文件的引用地址不对
参考配置#xff1a;https://cli.vuejs.org/zh/config
修改vue.config.js #xff0c;根据与 后端 或 运维 沟通修改
module.export {// 默认 publicPath: //…1、项目打包完运行空白
引用资源路径问题打包完的【index.html】文件引用其他文件的引用地址不对
参考配置https://cli.vuejs.org/zh/config
修改vue.config.js 根据与 后端 或 运维 沟通修改
module.export {// 默认 publicPath: /// 打包自测阶段可改为 ./实际值根据 后端或运维 沟通决定publicPath: ./
}2、路由
路由模式 hash 、 history
hash地址携带 # 正常打包可访问前端测试开发阶段使用history地址栏会改变可以使用浏览器的【返回】按钮需要服务器端的支持需要【后端或运维】做相关配置做一下路径重定向问题
路由懒加载
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.变量名称】的方式获取变量值
# 开发环境配置
NODE_ENV development# 页面标题
VUE_APP_TITLE xxx# 开发环境
VUE_APP_BASE_API /dev-api# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES true根据不同环境做相应的配置
4、安装可视化插件
npm install webpack-bundle-analyzerconst BundleAnalyzer require(webpack-bundle-analyzer).BundleAnalyzerPlugin;module.exports {// 写法一configureWebpack: {plugins: [new BundleAnalyzer()]}// 写法二configureWebpack:config{config.plugins.push(new BundleAnalyzer())}
}5、配置 vue.config.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
