這篇文章給大家分享的是有關(guān)vue-cli常用設(shè)置有哪些的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

專注于為中小企業(yè)提供網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)寧晉免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了1000多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

基于vue-cli做了好幾個項目了，想把一些自己的常用設(shè)置寫出來，磨了好久，一看vue-cli3.0都快出來了，不能再磨了。。

路徑相關(guān)

css內(nèi)引用的資源

build -> utils.js
 // generate loader string to be used with extract text plugin
 function generateLoaders (loader, loaderOptions) {
  //less
  // Extract CSS when that option is specified
  // (which is the case during production build)
  if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    publicPath: '../../', //注意: 此處根據(jù)路徑, 自動更改
    fallback: 'vue-style-loader'
   })
  } else {
   return ['vue-style-loader'].concat(loaders)
  }
 }

本地訪問

config -> index.js
module.exports = {
 build: {
  //less
  //assetsPublicPath: '/',
  assetsPublicPath: './',
  //less
 },
 //less
}

調(diào)試相關(guān)

內(nèi)網(wǎng)訪問

config -> index.js

module.exports = {
 //less
 dev: {
  //less
  port: process.env.PORT || 8080,//可改端口
  host:'192.168.0.105',//不是8080端口可能需要指定host為本機IP
 }
}

跨域代理

config -> index.js
module.exports = {
 //less
 dev: {
  //less
  proxyTable: {
   '/AppHome': {
    target: 'http://192.168.0.211:2334',//接口域名
    changeOrigin: true,//是否跨域
    pathRewrite: {
     '^/AppHome': '/AppHome'//需要rewrite重寫
    }
   }
  },
 }
}
config -> dev.env.js
module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 API_HOST: '"AppHome/"' 
})
config -> prod.env.js
module.exports = {
 NODE_ENV: '"production"',
 API_HOST: '"http://xxx.xxx.com/AppHome/"' //生產(chǎn)環(huán)境改為絕對地址，免得路徑錯了
}
//調(diào)用
this.$http
  .post(process.env.API_HOST + "GetApproveTypeList", { ID: 0 })
  .then(data => {
  let $data = data.data;
  if ($data.IsSuccess) {
    this.list.push(...$data.Model);
  }
});

路由加載切換

異步加載可以加快首屏加載速度，但是在開發(fā)階段會導(dǎo)致熱加載變慢，所以根據(jù)NODE_ENV來判斷，開發(fā)環(huán)境不使用異步

let _import
if (process.env.NODE_ENV === 'development') {
 _import = file => require('@/components/' + file + '.vue').default
}
if (process.env.NODE_ENV === 'production') {
 _import = file => () => import('@/components/' + file + '.vue')
}

routes: [
  {
    path: '/',
    name: 'Index',
    component: _import('Approve/Index'),
    meta: {
      level: 1
    }
  },
]

打包

dll打包

1、在build目錄新建webpack.dll.conf.js

var path = require("path");
var webpack = require("webpack");
module.exports = {
  // 你想要打包的模塊的數(shù)組
  entry: {
    vendor: ['vue/dist/vue.esm.js', //有些資源需要直接指定js，否則會重復(fù)打包
         'vuex',
         'axios',
         'vue-router'
        ]
  },
  output: {
    path: path.join(__dirname, '../static/js'), // 打包后文件輸出的位置
    filename: '[name].dll.js',
    library: '[name]_library'
    // vendor.dll.js中暴露出的全局變量名。
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '..', '[name]-manifest.json'),
      name: '[name]_library',
      context: __dirname
    }),
    // 壓縮打包的文件
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
};

2、在build目錄下的webpack.prod.conf.js添加新插件

const webpackConfig = merge(baseWebpackConfig, {
  //less
 plugins: [
  //less
  new webpack.DllReferencePlugin({
   context: __dirname,
   manifest: require('../vendor-manifest.json')
  })
 ]
})

3、在項目根目錄下的index.html內(nèi)添加dll.js引用