常用的Vue.js配置教程 vue.config.js配置文件常用的配置项

2020年07月17日 前端开发 61点热度 1人点赞 0条评论

Vue.js是现在最火的前端框架之一,现在Vue.js官方的脚手架也越来越智能,但是我们在使用Vue.js开发项目的时候,难免还是需要针对我们的项目做一些基础的配置,下面就把长沙网站建设在使用Vue.js开发项目的配置写成了这篇常用的Vue.js配置教程 vue.config.js配置文件常用的配置项:

const path = require('path') // 引入node.js的内置模块

// 定义一个函数用于拼接路径
function resolve (dir) {
  return path.join(__dirname, dir)
}

// 导出我们的配置
module.exports = {
  publicPath: '/', // 配置项目根目录
  outputDir: 'dist', // 构建输出目录
  assetsDir: 'assets', // 静态资源目录
  lintOnSave: true, // 是否开启eslint检测,falase不开启,true开启
  productionSourceMap: true, // 生产环境下开启sourceMap支持断点调试
  devServer: {
    open: true, // 是否启动打开浏览器
    host: '0.0.0.0', // 主机,0.0.0.0支持局域网地址,可以用真机测试
    port: 8080, // 端口
    https: false, // 是否启动https
    // 配置跨域代理
    proxy: {
      '/api': {
        // target: 'http://vueshop.glbuys.com/api',
        target: 'http://sp.webxuewen.cn/api',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  configureWebpack: {
    devtool: 'source-map' // 配置开发者环境sourceMap用于断点调试
  },
  chainWebpack: (config) => {
    // 定义别外,在vue开发时更方便调用
    config.resolve.alias
      .set('@', resolve('src'))
      .set('_c', resolve('src/components'))
      .set('_v', resolve('src/views'))
      .set('_api', resolve('src/api'))
  }
}

以上内容就是长沙网站建设在使用Vue.js开发项目时vue.config.js配置文件常用的配置项,希望对你有帮助,如果您对Vue.js的配置有更好的建议或者意见也欢迎留言一起探讨,大家共同学习共同进步,由于时间原因,今天的vue.js教程就写到这里结束了。

标签:

Kratos

保持饥渴的专注,追求最佳的品质

文章评论