vue-cli經常使用設置

時間 2019-11-07

標籤 vue cli 經常使用設置简体版

原文原文鏈接

vue-cli經常使用設置

基於vue-cli作了好幾個項目了，想把一些本身的經常使用設置寫出來，磨了很久，一看vue-cli3.0都快出來了，不能再磨了。。

路徑相關

css內引用的資源

build -> utils.jscss

// 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: '../../', //注意: 此處根據路徑, 自動更改
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

本地訪問

config -> index.jshtml

module.exports = {
  build: {
    //less
    //assetsPublicPath: '/',
    assetsPublicPath: './',
    //less
  },
  //less
}

調試相關

內網訪問

config -> index.jsvue

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

跨域代理

config -> index.jsnode

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/"' //生產環境改成絕對地址，省得路徑錯了
}

//調用
this.$http
    .post(process.env.API_HOST + "GetApproveTypeList", { ID: 0 })
    .then(data => {
    let $data = data.data;
    if ($data.IsSuccess) {
        this.list.push(...$data.Model);
    }
});

路由加載切換

異步加載能夠加快首屏加載速度，可是在開發階段會致使熱加載變慢，因此根據NODE_ENV來判斷，開發環境不使用異步

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打包

一、在build目錄新建webpack.dll.conf.jswebpack

var path = require("path");
var webpack = require("webpack");

module.exports = {
    // 你想要打包的模塊的數組
    entry: {
        vendor: ['vue/dist/vue.esm.js', //有些資源須要直接指定js，不然會重複打包
                 '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
            }
        })
    ]
};

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

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

三、在項目根目錄下的index.html內添加dll.js引用web

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="./static/js/vendor.dll.js"></script>
  </body>
</html>

四、在項目根目錄下的package.json內添加dll命令(順便給build命令添加report)，運行一次生成dll.jsvue-router

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "npm run dev",
    "build": "node build/build.js --report",
    "dll": "webpack --config build//webpack.dll.conf.js"
  }

關閉SourceMap

config -> index.jsvuex

module.exports = {
  //less
  build: {
    //less
    productionSourceMap: false,
  },
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。