当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue.config.js的常用配置

vue.config.js的常用配置

2019年12月18日  | 移动技术网IT编程  | 我要评论 
const path = require('path')
const glob = require('glob')
const resolve = (dir) => path.join(__dirname, dir)
const pages_path = './src/pages/*/*.js'

module.exports = {
 //  publicpath: '/test/',  // 设置部署应用包时的基本url
  publicpath: process.env.node_env === 'production' ? '/test/' : './', // 开发环境与生产环境的区分
  //outputdir: 'testbuild', // 运行build 时生产的构建文件的目录，默认'dist'
  // assetsdir: 'assets', // build之后生成的静态资源放置的目录，默认''
  // indexpath: 'test/home.html', // build之后生成的的路径
  // filenamehashing: true, // build之后生成的静态资源默认情况下加了hash值以控制静态资源的缓存，默认是true
  // pages: {
  //   index:{
  //     entry: 'src/pages/index/main.js', // page入口
  //     template: 'public/', // public 里面的文件
  //     filename: '', // build之后生成的文件及路径名
  //     title: 'index page',
  //     chunks: ['chunk-vendors', 'chunk-common', 'index']
  //   },
  //   page1:{
  //     entry: 'src/pages/page1/main.js', // page入口
  //     template: 'public/page1.html', // public里面的文件
  //     filename: 'page1.html', // build之后生成的文件及路径名
  //     title: 'page1', // 使用此项时，// template 中的 title 标签需要是 <title><%= htmlwebpackplugin.options.title %></title>
  //     chunks: ['chunk-vendors', 'chunk-common', 'page1'] // 提取出来的通用 chunk 和 vendor chunk
  //   },
  //   page2:{
  //     entry: 'src/pages/page2/main.js', // page入口
  //     template: 'public/page2.html',
  //     filename: 'page2.html', // build之后生成的文件及路径名
  //     title: 'index page',
  //     chunks: ['chunk-vendors', 'chunk-common', 'page2']
  //   }
  // },
  pages:setpages(),
  productionsourcemap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
  // devserver: {
  //   port: '1111',
  //   // proxy: 'http://localhost:8080'  //告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:8080。
  //   proxy: {
  //     '/api': {
  //       //要访问的跨域的域名
  //       target: 'http://localhost:8080',
  //       ws: true, // 是否启用websockets
  //       secure:false, // 使用的是http协议则设置为false，https协议则设置为true
  //       changorigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样客户端端和服务端进行数据的交互就不会有跨域问题
  //       pathrewrite: {
  //           '^/api': ''
  //       }
  //     }
  //   }
  // },
  chainwebpack: config => {
    /* 自动导入公共文件*/
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.foreach(
      type => addstyleresource(config.module.rule('scss').oneof(type))
    )

    /* 添加别名*/
    config.resolve.alias
      .set('@title', resolve ('src/assets/commonpublic/title.vue'))
  }
}

/**
 * 注入公共样式
 * @param rule
 */
function addstyleresource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, 'src/assets/common.scss') // resolve()返回绝对路径
      ]
    })
}

/**
 * 多页面跳转
 */
function setpages () {
  let pages = {}
  glob.sync(pages_path).foreach(filepath => {
    let filelist = filepath.split('/')
    let filename = filelist[filelist.length - 2]

    pages[filename] = {
      entry: filepath,
      template:`public/${filename}.html` , // 'public/'
      filename: `${filename}.html`,
      // title:
      chunks: ['chunk-vendors', 'chunk-common', filename]
    }
  })
  return pages
}

对应生成的dist文件目录及多页面配置时的文件目录如下：

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网