项目目录

创建项目均采用vue-cli创建，vuecli3中简化了目录结构，较vuecli2看起来 更简洁。

vue2目录.png

vue3目录.png

vuecli2中配置文件均在build和config中，vuecli3中的配置文件需自己创建，名为vue.config.js

配置文件

mark下常用配置

vuecli2中配置

• 别名alias配置

vuecli2中在build中的webpack.base.conf.js中设置，代码如下：

resolve: {
    extensions: ['.js', '.vue', '.json'], //自动解析确定的拓展名,使导入模块时不带拓展名
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'static': path.resolve(__dirname, '../static'),
      'img': resolve('static/img'),
      'cesium': path.resolve(__dirname, cesiumSource),
      'json': resolve('static/json')
    }
  },

• 常用配置在config中的index.js里

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/base':{
        target: 'http://192.168.1.41:5066',
        changeOrigin: true,
        pathRewrite: {
          '^/base': '/'
        }
      },
      //'/dom': {
        //target: 'http://192.168.1.41:5089', //设置你调用的接口域名和端口号 别忘了加http
      '/dom': {
        target: 'http://192.168.1.41:5044',
        changeOrigin: true,
        pathRewrite: {
          '^/dom': '/'
        }
      },
      '/label': {
        target: 'http://192.168.1.41:5099', //设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/label': '/'
        }
      },
      '/dem': {
        target: 'http://192.168.1.41:5088', //设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/dem': '/'
        }
      },
      '/resource': {
        target: 'http://192.168.1.89:8090/sjy/api', //设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/resource': '/'
        }
      },
      '/geoserver': {
        target: 'http://192.168.0.200:31000/geoserver', //设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/geoserver': '/'
        }
      }
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    // Use Eslint Loader?
    // If true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    useEslint: true,
    // If true, eslint errors and warnings will also be shown in the error overlay
    // in the browser.
    showEslintErrorsInOverlay: false,

    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    // devtool: 'cheap-module-eval-source-map',
    devtool: 'source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

  build: {
    // Template for index.html 配置入口文件-首页
    index: path.resolve(__dirname, '../ksh/index.html'),
    //index: path.resolve(__dirname, 'X:/basedom/DataCenter5/index.html'),

    // Paths 配置项目build之后的打包路径
    assetsRoot: path.resolve(__dirname, '../ksh'),
    //assetsRoot: path.resolve(__dirname, 'X:/basedom/DataCenter5'),
    // 配置资源文件路径,即static文件夹路径
    assetsSubDirectory: 'static',
    // 配置资源文件在项目中的引用【相对路径】,这里什么都不填,就会使用相对路径
    assetsPublicPath: '',

    /**
     * Source Maps 打包时不生成.map文件
     */

    productionSourceMap: false,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#eval-source-map',
    cacheBusting: false,

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    // 下面是是否在生产环境中压缩代码，如果要压缩必须安装compression-webpack-plugin
    productionGzip: false,
    // 下面定义要压缩哪些类型的文件
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

vuecli3中配置

vuecli3中配置在自创建的文件vue.config.js里

const path = require('path')
const resolve = dir => path.resolve(__dirname, dir)
const webpack = require('webpack')

const baseUrl = process.env.NODE_ENV === 'production' ? './' : '/';
module.exports = {
    publicPath: baseUrl,
    outputDir: 'dist',
    assetsDir: 'static',
    filenameHashing: true,
    // When building in multi-pages mode, the webpack config will contain different plugins
    // (there will be multiple instances of html-webpack-plugin and preload-webpack-plugin).
    // Make sure to run vue inspect if you are trying to modify the options for those plugins.
    pages: {
        index: {
            // entry for the pages
            entry: 'src/main.js',
            // the source template
            template: 'public/index.html',
            // output as dist/index.html
            filename: 'index.html',
            // when using title option,
            // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
            title: '首页',
            // chunks to include on this pages, by default includes
            // extracted common chunks and vendor chunks.
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        }
        // 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: ''
    },
    // eslint-loader 是否在保存的时候检查
    lintOnSave: false,
    // 是否使用包含运行时编译器的Vue核心的构建
    runtimeCompiler: false,
    // 默认情况下 babel-loader 忽略其中的所有文件 node_modules
    transpileDependencies: [],
    // 生产环境 sourceMap
    productionSourceMap: false,
    // cors 相关 https://jakearchibald.com/2017/es-modules-in-browsers/#always-cors
    // corsUseCredentials: false,
    // webpack 配置，键值对象时会合并配置，为方法时会改写配置
    // https://cli.vuejs.org/guide/webpack.html#simple-configuration
    chainWebpack: (config) => {
        // config.plugin('provide').use(webpack.ProvidePlugin, [{
        //   $: 'jquery',
        //   jquery: 'jquery',
        //   jQuery: 'jquery',
        //   'window.jQuery': 'jquery',
        //   Popper: ['popper.js','default']  //在jquery的配置下添加多这一行配置
        // }]);
    },
    // webpack 链接 API，用于生成和修改 webapck 配置
    // https://github.com/mozilla-neutrino/webpack-chain
    chainWebpack: (config) => {
        // 修复HMR
        config.resolve.symlinks(true);
        // 因为是多页面，所以取消 chunks，每个页面只对应一个单独的 JS / CSS
        config.optimization
            .splitChunks({
                cacheGroups: {}
            });
        // 'src/lib' 目录下为外部库文件，不参与 eslint 检测
        config.module
            .rule('eslint')
            .exclude
            .add('/src/lib')
            .end();
        config.resolve.alias
            .set('@', resolve('src'))
            .set('assets', resolve('src/assets'))
            .set('components', resolve('src/components'))
            .set('public', resolve('public'))
            .set('img', resolve('public/img'))

    },
    // 配置高于chainWebpack中关于 css loader 的配置
    css: {
        // 是否开启支持 foo.module.css 样式
        modules: false,
        // 是否使用 css 分离插件 ExtractTextPlugin，采用独立样式文件载入，不采用 <style> 方式内联至 html 文件中
        extract: false,
        // 是否构建样式地图，false 将提高构建速度
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {
            css: {
                // options here will be passed to css-loader
            },
            sass: {
                data: `$baseUrl: "${baseUrl}";`
            },
            postcss: {
                // options here will be passed to postcss-loader
            }
        }
    },
    // All options for webpack-dev-server are supported
    // https://webpack.js.org/configuration/dev-server/
    devServer: {
        open: false,
        host: '0.0.0.0',
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: null,
        before: app => {}
    },
    // 构建时开启多进程处理 babel 编译
    parallel: require('os').cpus().length > 1,
    // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {},
    // 第三方插件配置
    pluginOptions: {},
    // disableHostCheck:true
};