vue-cli3.0使用及部分配置詳解

vue -V

var env = process.env.NODE_ENV
console.log(env)

// vue.config.js 配置說明
// 這里只列一部分，具體配置慘考文檔啊
module.exports = {
  // baseUrl type:{string} default:'/' 
  // 將部署應(yīng)用程序的基本URL
  // 將部署應(yīng)用程序的基本URL。
  // 默認情況下，Vue CLI假設(shè)您的應(yīng)用程序?qū)⒉渴鹪谟虻母夸浵隆?  // https://www.my-app.com/。如果應(yīng)用程序部署在子路徑上，則需要使用此選項指定子路徑。例如，如果您的應(yīng)用程序部署在https://www.foobar.com/my-app/，集baseUrl到'/my-app/'.

  baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',

  // outputDir: 在npm run build時 生成文件的目錄 type:string, default:'dist'

  // outputDir: 'dist',

  // pages:{ type:Object,Default:undfind } 
/*
 構(gòu)建多頁面模式的應(yīng)用程序.每個“頁面”都應(yīng)該有一個相應(yīng)的JavaScript條目文件。該值應(yīng)該是一
 個對象，其中鍵是條目的名稱，而該值要么是指定其條目、模板和文件名的對象，要么是指定其條目
 的字符串，
 注意：請保證pages里配置的路徑和文件名 在你的文檔目錄都存在 否則啟動服務(wù)會報錯的
*/
  // pages: {
    // index: {
      // entry for the page
      // entry: 'src/index/main.js',
      // the source template
      // template: 'public/index.html',
      // output as dist/index.html
      // filename: 'index.html'
    // },
    // when using the entry-only string format,
    // template is inferred to be `public/subpage.html`
    // and falls back to `public/index.html` if not found.
    // Output filename is inferred to be `subpage.html`.
    // subpage: 'src/subpage/main.js'
  // },

  //  lintOnSave：{ type:Boolean default:true } 問你是否使用eslint
  lintOnSave: true,
  // productionSourceMap：{ type:Bollean,default:true } 生產(chǎn)源映射
  // 如果您不需要生產(chǎn)時的源映射，那么將此設(shè)置為false可以加速生產(chǎn)構(gòu)建
  productionSourceMap: false,
  // devServer:{type:Object} 3個屬性host,port,https
  // 它支持webPack-dev-server的所有選項

  devServer: {
    port: 8085, // 端口號
    host: 'localhost',
    https: false, // https:{type:Boolean}
    open: true, //配置自動啟動瀏覽器
    // proxy: 'http://localhost:4000' // 配置跨域處理,只有一個代理
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }, // 配置多個代理
  }
}

module.exports = {

dll: true

}

module.exports = {

dll: [

'dep-a',

'dep-b/some/nested/file.js'

]
}

# 在 public/index.html中引用靜態(tài)資源
<%= webpackConfig.output.publicPath %>
<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico" rel="external nofollow"  >
# vue templates中，需要在data中定義baseUrl
<template>
 <img :src="`${baseUrl}my-image.png`">
</template>
<script>
 data () {
 return {
  baseUrl: process.env.BASE_URL
 }
 }
</script>

// vue.config.js
module.exports = {
 chainWebpack: config => {
 config.module
  .rule('js')
  .include
   .add(/some-module-to-transpile/) // 要處理的模塊
 }
}

// vue.config.js
module.exports = {
 chainWebpack: config => {
 config.module
  .rule('scss')
  .use('sass-loader')
  .tap(options =>
  merge(options, {
   includePaths: [path.resolve(dirname, 'node_modules')],
  })
  )
 }
}

// vue.config.js
module.exports = {
 chainWebpack: config => {
 config
  .plugin('html')
  .tap(args => {
  return [/* new args to pass to html-webpack-plugin's constructor */]
  })
 }
}

chainWebpack: config => {
 if (process.env.NODE_ENV === 'production') {
  config
   .plugin('uglify')
   .tap(([options]) =>{
    // 去除 console.log
    return [Object.assign(options, {
     uglifyOptions: { compress: {
      drop_console : true,
      pure_funcs: ['console.log']
     }}
    })]
   })
 }
}

.env    # 在所有環(huán)節(jié)中執(zhí)行
.env.local   # 在所有環(huán)境中執(zhí)行，git會ignored
.env.[mode]   # 只在特定環(huán)境執(zhí)行( [mode] 可以是 "development", "production" or "test" )
.env.[mode].local # 在特定環(huán)境執(zhí)行, git會ignored
.env.development # 只在生產(chǎn)環(huán)境執(zhí)行
.env.production  # 只在開發(fā)環(huán)境執(zhí)行

# 鍵名須以VUE_APP開頭
VUE_APP_SECRET=secret

console.log(process.env.VUE_APP_SECRET)