vue开发常用配置

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

// src/main.js
function setHtmlFontSize() {
  const baseSize = 100 // 由于浏览器字体最小为12px，故这个值要设置大一点，保证计算所得的html字体大于12px
  const baseWidth = 375
  const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
  const htmlDom = document.getElementsByTagName('html')[0]
  htmlDom.style.fontSize = htmlWidth / baseWidth * baseSize + 'px'
}
setHtmlFontSize()
window.onresize = setHtmlFontSize // 动态设置html的font-size，样式单位使用rem，用于响应式开发（可通过调整baseSize和baseWidth去计算设计尺寸和rem的转换关系）
// config/index.js
module.exports = {
  dev: {
    host: '192.168.1.100', // 修改为本机IP地址进行访问（如本机IP地址动态获取，每次启动时需重新配置，否则启动会报错）
  },
  build: {
    assetsPublicPath: './', // 默认为根路径，修改为当前路径，防止打包后找不到引用的资源而不显示页面
    productionSourceMap: false, // 打包时不生成map文件
  }
}
// build/utils.js
exports.cssLoaders = function (options) {
  function generateLoaders (loader, loaderOptions) {
    if (options.extract) {
      return ExtractTextPlugin.extract({
        publicPath: '../../' // 增加这一行，解决样式中引入相对路径背景图片，打包后路径出错找不到的问题
      })
    }
  }
}
// build/webpack.prod.conf.js
const webpackConfig = merge(baseWebpackConfig, {
  plugins: [
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false, // 去除warning警告
          drop_console: true, // 发布时去除console语句
          pure_funcs: ['console.log'] // 配置发布时，不被打包的函数
        }
      },
    }),
    new HtmlWebpackPlugin({
      minify: {
        removeComments: false, // 打包保留注释
    }),
  ]
})
// .eslintrc.js
module.exports = {
  rules: {
    'space-before-function-paren': 0, // 不在函数和括号之间加空格
    'standard/computed-property-even-spacing': 0 // 允许两个[]不在同一行
  }
}
// build/webpack.base.conf.js
module.exports = {
  externals: {
    'AMap': 'AMap'  // 引入高德地图对象，引入后 new AMap() 才不会报错
  }
}

以上是 vue开发常用配置 的全部内容， 来源链接： utcz.com/z/377262.html

回到顶部