2021-10-29 vuecli2 打包研究学习，vue.config.js配置说明

最新推荐文章于 2024-08-14 08:30:00 发布

shangrila-xiu

最新推荐文章于 2024-08-14 08:30:00 发布

阅读量1.9k

点赞数 2

分类专栏： vue vuecli 文章标签： vue.js webpack javascript

本文链接：https://blog.csdn.net/lyx9611/article/details/121035479

版权

vue 同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

vuecli

4 篇文章 0 订阅

订阅专栏

1，图片丢失

在用npm run build 打包的时候，正常img标签中的src图片路径和css中的图片路径是可以正常识别的，

但是在打包js获取的图片路径时，打包后无法找到图片，原因是

js动态生成的路径无法被url-loader解析到，如果你去build，会发现图片甚至不会打包输出到dist目录（webpack是按需打包的）。

如果你是vue-cli初始化的项目，解决的办法：第一步，把图片放到src同级的static目录（build/build.js文件中有一段代码是把static目录拷贝到dist/static的），比如图片放在static/img/a.png第二步，js中使用./static/img/a.png去引用就行了。
在这里插入图片描述

2，空白页

创建vue脚手架搭建项目之后,用npm run build经行打包，运行index.html后出现异常:
在这里插入图片描述
打开dist/index.html，诸如这些的，引入是有问题的，

这边的全部是绝对路径，而本应该是相对路径。
解决办法:
打开config/index.js文件，将build->assetsPublicPath改为“./”，即可，就是前面加个点。

3，Vue打包后，css引入的图片等资源找不到路径的问题【我未实践】

Vue 在npm run dev 的时候，图片背景等正常显示，npm run build后，报错，提示图片找不到。

原因： npm run dev 时候，加载资源是绝对路径，

//加载资源是相对路径，且文件目录已改变。 
  npm run build

默认情况下为

  index.html 
  static 
  | --img 
      | --图片.jpg 
  | --css 
      | --app.css 
  | --js 
      | --app.js

打包后，不管原先的图片资源在哪里，路径通通变成static/img/xxxx ，若在HTML里的IMG标签的src引入图片，则正常显示，因为路径是从 index.html 开始寻找的，所以static/img/xxxx是能正确访问到图片。

但是在css/app.css里，在当前的CSS目录下，无 static/img 路径，所以资源找不到。
解决办法：

打开build / utils.js，在绿色位置加入 publicPath：’…/…/’ ,（如果自己更改了打包时候的路径，请自行匹配）
该设置会把css所有引入的资源的路径变成 …/…/static/img/ ，这样就能找到资源了。

通过项目实践整理的配置

domain.js

//src/domain.js
let config = {
  //开发环境
    httpUrl: 'http://localhost:8889/api',//lyx本地
    //开发算法地址
    calcUrl: 'xxxx/',
   
    db: {
      host: 'localhost',
      user: 'root',
      password: '123456',
      port: '3306',
      database: '数据库名字',
      connectionLimit: 1000,
      connectTimeout: 60 * 60 * 1000,
      acquireTimeout: 60 * 60 * 1000,
      timeout: 60 * 60 * 1000,
    },
  showloading: {
    loadingInstance: null, //loadin实例
    timeId: null,
    showLoading: true,
      requestTime:9000,
    loadingTime: 900, // 在此时间内，请求还没回来的话，就显示加载中动画，单位ms
    loadingText: '加载中...', // 请求loading中的文字提示
  },

}
module.exports = {
  config
}

vue.config.js

//vue.config.js
//vue.config.js
const domain = require('./domain.js')
const path = require('path')
module.exports = {
  // 打包后输出文件目录,当运行 vue-cli-service build 时生成的生产环境构建文件的目录
  outputDir: path.resolve('./server/webPublic'),
  // 静态资源引入路径，静态资源前缀,部署应用包时的基本 URL
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  indexPath: 'index.html',
  // assetsPublicPath:'./',
  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
  assetsDir: 'assets',
  // eslint-loader 是否在保存的时候检查,安装@vue/cli-plugin-eslint有效,
  // 是否在保存的时候使用 `eslint-loader` 进行检查。有效的值：`ture` | `false` | `"error"`
  // 当设置为 `"error"` 时，检查出的错误会触发编译失败。
  lintOnSave: process.env.NODE_ENV !== 'production',
  // 是否使用包含运行时编译器的 Vue 构建版本,设置true后你就可以在使用template
  runtimeCompiler: false,
  // 生产环境是否生成 sourceMap 文件,如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false,
  // 生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)
  integrity: false,
  // node_modules里的依赖默认是不会编译的,会导致es6语法在ie中的语法报错,
  // 所以需要在vue.config.js中使用transpileDependencies属性配置node_modules中指定哪些文件夹或文件需要编译.
  // transpileDependencies: [/node_modules[/\\\\](mathjs)[/\\\\]/],
  // transpileDependencies: process.env.NODE_ENV === "development" ? ["*"] : [],
  // webpack相关配置
  chainWebpack: (config) => {
    config.resolve.alias
      .set('vue$', 'vue/dist/vue.esm.js')
      .set('@', path.resolve(__dirname, './src'))
    // 修复HMR，热更新配置
    config.resolve.symlinks(true)
    // 移除 preload 插件
    config.plugins.delete('preload')
    // 移除 prefetch 插件
    config.plugins.delete('prefetch')

    config
      .module
      .rule('images')
      .test(/\.(jpe?g|png|gif)$/i)
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 10000,
        // publicPath: process.env.NODE_ENV === 'production' ? 'https://songsutiku-bucket.oss-cn-hangzhou.aliyuncs.com/yunxue/img' : '',
        outputPath: 'img',
        name: '[name].[ext]'
      })
      .end()

  },
 /* // css相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin 生产环境下是true,开发环境下是false
    extract: process.env.NODE_ENV === 'production',
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      //这里的选型会传递给css-loader
      css:{},
      //这里的选型会传递给postcss-loader
      postcss:{},
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.sass` 这个文件
        // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
        additionalData:`` ,//`@import "~@/variables.sass";`
      },
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `prependData` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      scss: {
        additionalData: ``,//`@import "~@/variables.scss";`
      },
      // 给 less-loader 传递 Less.js 相关选项
      less:{
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `primary` is global variables fields name
        globalVars: {
          primary: '#fff'
        }
      }
    },
    // 启用 CSS modules for all css / pre-processor files.即为所有css及影响其预处理文件开启Css Moudles
    //这个选项不会影响`*.vue文件`
    requireModuleExtension: false
  },*/
  // webpack-dev-server 相关配置
  devServer: {
    // open: true,
    // host: 'localhost',
    // port: 8080,
    // historyApiFallback: true,
    // noInfo: true,
    https: false,
    hot: true,
    hotOnly: false,
    proxy: { // 配置跨域
      '/api': {
        target: (process.env.NODE_ENV !== 'production' ? domain.config.httpUrl : domain.config.httpUrl), // 这里后台的地址模拟的;应该填写你们真实的后台接口
        changOrigin: true, // 允许跨域
        // ws: true,// 如果要代理 websockets
        secure: false, // false为http访问，true为https访问
        pathRewrite: {
          /* 重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/api/core/getData/userInfo 时
                      实际上访问的地址是：http://121.121.67.254:8185/core/getData/userInfo,因为重写了 /api
                     */
          '^/api': ''
        }
      },
      '/test': { // 测试
        target: 'xxx'
      },
      '/pre': { // 预发布
        target: 'xxx'
      },
      '/pro': { // 正式
        target: 'xxx'
      }

    },
    // 设置代理
    before: app => {}
  },
  pluginOptions: { // 第三方插件配置
    // ...
  }
}

//关键词：
Preload、Prefetch
Preload：用于标记页面加载后即将用到的资源，浏览器将在主体渲染前加载preload标记文件。Vue CLI 应用会为所有初始化渲染需要的文件自动生成 preload 提示；
Prefetch: 用于标记浏览器在页面加载完成后，利用空闲时间预加载的内容。Vue CLI 应用默认为所有作为 async chunk 生成的 JavaScript 文件 (通过动态 import() 按需 code splitting 的产物) 自动生成prefetch提示。

压缩gzip

拆完包之后，我们再用gzip做一下压缩
安装compression-webpack-plugin

cnmp i compression-webpack-plugin -D

在vue.congig.js中引入并修改webpack配置

const CompressionPlugin = require('compression-webpack-plugin')

configureWebpack: (config) => {
 if (process.env.NODE_ENV === 'production') {
 // 为生产环境修改配置...
 config.mode = 'production'
 return {
 plugins: [new CompressionPlugin({
 test: /\.js$|\.html$|\.css/, //匹配文件名
 threshold: 10240, //对超过10k的数据进行压缩
 deleteOriginalAssets: false //是否删除原文件
 })]
 }
 }

在服务器我们也要做相应的配置
如果发送请求的浏览器支持gzip，就发送给它gzip格式的文件
我的服务器是用express框架搭建的
只要安装一下compression就能使用

const compression = require('compression')
app.use(compression())

注意，后面这一句，要放在所有其他中间件注册之前

chainWebpack与configureWebpack的区别？不把webpack暴露出来了

1、先说第一个问题，chainWebpack 和 configureWebpack 的区别。 chainWebpack 的底层是 webpack-chain，命令式 Webpack 配置的事实标准，提供了一套灵活的上层 API 进行 Webpack 配置而无需过分关注 Webpack Config 的规范细节。configureWebpack 的底层是 webpack-merge，能让你通过编写一个配置子集快速合并到最终的完整配置中。那么问题来了，如果我只是想修改已经存在于基础配置中的某个 loader 的选项，我用 configureWebpack 要怎么做？直接编写与那个 loader 相关的配置子集的话，很可能会覆盖掉有用的预置选项。
2、第二个问题，Vue CLI 配置到底有几套。在 Vue CLI 3 之前，Webpack 配置的部分是靠工程模板暴露给用户的，模板里是啥样 Webpack 配置就是啥样，Vue CLI 只是提供了一些预置配置和命令。你说的「一个版本一套」，其实是模板而不是 CLI。考虑到模板是 UGC，版本混乱的锅真不该 Vue CLI 来背。Vue CLI 3 开始 Webpack 配置就被封装到 vue.config.js 中了。为什么不再暴露原生 Webpack 配置文件，看后文。
3、第三个问题，Vue CLI 3 为什么要这么做（而不是暴露出 Webpack 配置本身）。如果经历过较长时间的 Vue CLI 2 项目，你大概能遇到「模板升级」的问题。一个工程通过模板初始化好后，工程配置部分就基本固定了。当这个模板升级带来了更优秀的工程配置，你就要面对如何引入新配置的难题。重新初始化项目，太肉疼；对比新旧模板差异并手动引入，太心累。总之就是很恼人。Vue CLI 3 放弃模板转向插件，就是希望能通过动态生成的方式解决这个问题。插件升级，你无需再关心哪里有变化、要如何引入到现有工程，你需要做的只是升级插件依赖的版本（预期 Vue CLI 4 甚至可以帮你升级你的业务代码）。但实现这一效果的前提就是 Webpack 配置由 Vue CLI（及各种插件）来管理操控。举一个简单的例子：原本 webpack.config.js 在 /build 下的，你出于某种原因移到了工程根目录，Vue CLI 要如何跟踪并更新配置呢？一切的抉择都是取舍。Vue CLI 3 的改变是为了能减少开发者在非业务代码方面的消耗，提供更好的工程演进体验。

chainWebpack配置的语法参考：我从chainWebpack与configureWebpack
在这里插入图片描述