vue.config.js 一些配置

const path = require('path');

// 设置文件路径别名方法
function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {  
  // publicPath: './', // 公共路径
  //如果使用了history.pushState pages的路由时; 选项构建多页面应用时;
  publicPath: process.env.NODE_ENV === 'production'
    ? './'
    : '/',
  outputDir: 'xlz',  // 打包(build)生成文件目录 默认dist
  assetsDir: '', // 默认不写或空,css js img文件夹都将放置在根目录下,所有的静态文件放置路径
  indexPath: 'index.html', // 指定打包生成的index.html放置的路径 例:xlz/index.html,index.html将被放置在dist/xlz/index.html
  lintOnSave: false, // 是否开启eslint保存检测,有效值:ture | false | 'error'
  productionSourceMap: false,  // 设置为true的时候,打包完成后生成一些js.map文件,如果有报错,可以精确的输出哪一个文件、哪一行报错
  css:{
    sourceMap: false, // 设置为true的时候 打包完成后会生成一些css.map文件,如果有报错,可以精确的输出哪一个文件、哪一行报错
    extract: true, // 是否使用 css 分离插件 ExtractTextPlugin,采用独立样式文件载入,不采用 <style> 方式内联至 html 文件中
    requireModuleExtension: true // 开启module <style module></style>
  },
  devServer:{
    open: true, // 启动后是否自动打开浏览器
    host: 'localhost', // 默认是localhost 设置启动的服务器地址 可设置为192.168.0.0本地ip方式 
    port: '8082', // 启动服务端口号
    // index: '/account.html',   //启动项目后,默认进入的页面地址
    proxy:{ // 使用对象的方式设置多个代理
      'api':{
        target: 'http://192.168.0.0:8080',   // 替换成需要请求的接口地址
        ws: true,  // 允许跨域
        changeOrigin: true,  
        pathRewrite: {
          '^/api': '/'  // 替换target中的请求地址 请求地址直接使用 /login的形式
        }
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  },
  configureWebpack: config => {
    // 必须添加环境判断代码,因为development(开发)环境下config.optimization是undefined 
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      // 去掉所有console.log()
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
    } else {
        // 为开发环境修改配置...
    }
  },
  chainWebpack: config =>{
    // 设置文件路径别名(需要配合顶部的方法)
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
  },
  pluginOptions:{
    // 第三方插件配置
  }
}

如果本篇文章对你有帮助的话,很高兴能够帮助上你。

当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章