前端开发Vue 项目打包注意事项

#前端开发Vue 项目打包注意事项| 来源: 网络整理| 查看: 265

前端模块化开发流程网易web前端开发流程前端网络开发流程

一、打包css,js路径问题一般情况下，通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。但当部署到带有文件夹的项目中，这种绝对路径就会出现问题，因为把配置的static文件夹当成了根路径，那么要解决这种问题，就得引用相对路径。

解决方式 1、打开build/webpack.prod.conf.js 找到output：增加 publicPath: ‘./’,

2、config/index.js中修改build下的 assetsPublicPath: ‘./’

二、资源里面的背景图片，不像index.html中加载资源一样，通过./static/js/app.js引用可以正常加载，图片资源是通过css加载的，如 background: url(“../../assets/images/logo-index.png”) no-repeat;被相对打包后变成了url(static/img/logo-index.2f00bf2.png) no-repeat所以我们要保留css引用图片的正常路径

那么就需要修改build文件夹下的utils.js代码 generateLoaders function 里面添加publicPath

function generateLoaders(loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] if (loader) { loaders.push({ loader: loader + ‘-loader’, options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap, }), }) } // Extract CSS when that option is specified // (which is the case during production build) if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: ‘vue-style-loader’, publicPath: ‘../../’, }) } else { return [‘vue-style-loader’].concat(loaders) } } 前端总体开发流程图最新简单的前端开发流程图大公司前端开发流程图 » 本文来自：前端开发者 » 《前端开发Vue 项目打包注意事项》 » 本文链接地址：https://www.rokub.com/7780.html » 您也可以订阅本站：https://www.rokub.com

【本文地址】

公司简介

联系我们