vue打包文件时的操作

迷南。 2022-01-20 11:51 272阅读 0赞

当我们将项目开发完成之后需要将文件打包成一个dist文件给后端，那么打包需要做什么呢？
    首先进入config文件的index.js文件中将build中的assetsPublicPath:'./'改为assetsPublicPath:'/'（打包文件）
     build: {
        // Template for index.html
        index: path.resolve(__dirname, '../dist/index.html'),
    
        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
    }
    然后，进入到build文件中将webpack.prod.conf.js文件中的output加入publicPath:'./'（图片的路径）
      output: {
        path: config.build.assetsRoot,
        publicPath:'./',
        filename: utils.assetsPath('js/[name].[chunkhash].js'),
        chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
      },
      然后进入build文件中的utils文件中修改（修改背景图的地址）
       if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath:'../../',（重点代码）
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
    然后将 proxyTable: {}模块内清空
    最后：npm run build
    复制代码

发表评论取消回复

表情：

评论列表（有 0 条评论，272人围观）

还没有评论，来说两句吧...

相关阅读

相关使用yarn build 打包vue项目时静态文件或图片未打包成功

解决Vue项目使用yarn build打包时静态文件或图片未打包成功的问题 ![在这里插入图片描述][bf8081cec9a14921822051170d02a404.p

分手后的思念是犯贱/ 2023年10月15日 09:44/ 0 赞/ 110 阅读

相关 Vue项目打包时页面空白

修改config/index.js ![在这里插入图片描述][2021042814040156.png] `/` 改为 `./` ![在这里插入图片描述][wat

女爷i/ 2023年01月17日 08:55/ 0 赞/ 182 阅读

相关 VUE_vue生产打包时不输出map文件，vue打包时不输出map文件

修改项目根目录 vue.config.js文件没有找到该文件则自己创建一个 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpd

我会带着你远行/ 2022年12月21日 14:51/ 0 赞/ 179 阅读

相关 vue打包文件过大（一）

项目上线了，业务功能ok，界面外观ok。就是有点缺陷就是第一次登录太慢了要8-9秒。这是客户给我的说的，虽然我解释了单页应用的优缺点，但还是需要分析下。 ![在这里插入图片

àì夳堔傛蜴生んèń/ 2022年11月03日 00:58/ 0 赞/ 208 阅读

相关 Vue cli3 打包时开启gzip文件压缩

Vue cli3 打包时开启gzip文件压缩 1. webpack在打包时可以借助 compression webpack plugin 实现gzip压缩，首先需要安装

喜欢ヅ旅行/ 2022年10月09日 03:16/ 0 赞/ 245 阅读

相关 vue-cli 打包时抽离项目相关配置文件

前言：当使用vue-cli进行开发时时常需要动态配置一些设置，比如接口的请求地址（axios.defaults.baseURL），这些设置可能需要在项目编译后再进行设置的，所以

深碍√TFBOYSˉ_/ 2022年06月02日 05:00/ 0 赞/ 242 阅读

相关 webpack 打包文件 vue 过大

打包优化 1、打包 vender 时不打包 vue、vuex、vue-router、axios 等，然后连上自己本地的路径在 build/webpack.base

àì夳堔傛蜴生んèń/ 2022年05月31日 04:41/ 0 赞/ 271 阅读

相关 vue打包文件时的操作

当我们将项目开发完成之后需要将文件打包成一个dist文件给后端，那么打包需要做什么呢？首先进入config文件的index.js文件中将build中的asse

迷南。/ 2022年01月20日 11:51/ 0 赞/ 273 阅读

相关 Vue 打包静态文件路径设置

1、js，css的路径不对方法：找到 config/index.js，将其中的assetsPublicPath值改为’./’ assetsPublicPath:'./

绝地灬酷狼/ 2021年09月16日 15:52/ 0 赞/ 795 阅读

相关 vue打包时gzip压缩的两种方案

开局一张图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

刺骨的言语ヽ痛彻心扉/ 2021年09月01日 05:44/ 0 赞/ 616 阅读