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

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

一、打包css,js路径问题
一般情况下,通过webpack+vuecli默认打包的cssjs资源,路径都是绝对的。
但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的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
赞(0)
64K

评论 抢沙发

评论前必须登录!