找回密码
当前位置：前端开发者 > Vue.js > 正文

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

2019-01-17 分类：Vue.js 阅读(1235) 评论(0)
前端模块化开发流程
网易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)
    }
}
前端总体开发流程图
最新简单的前端开发流程图
大公司前端开发流程图
赞(0)
前端开发者 » 前端开发Vue 项目打包注意事项
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论