精华内容
下载资源
问答
  • vue 配置vue.config.js

    2020-09-01 22:54:22
    vue配置vue.config.js 路径 代码如下: const path = require('path'); function resolve(dir) { return path.join(__dirname, dir); } module.exports = { lintOnSave: true, chainWebpack: (config) => ...

    vue配置vue.config.js 路径

    在这里插入图片描述
    在这里插入图片描述

    代码如下:

    
    const path = require('path');
    
    function resolve(dir) {
      return path.join(__dirname, dir);
    }
    module.exports = {
      lintOnSave: true,
      chainWebpack: (config) => {
        config.resolve.alias
          .set('@', resolve('src'))
          .set('@assets',resolve('src/assets'))
          .set('@components',resolve('src/components'))
          .set('@content',resolve('src/components/content'))
          .set('@common',resolve('src/components/common'))
          .set('@network',resolve('src/network'))
          .set('@views',resolve('src/views'))
          // 这里只写了部分,可以自己再添加,按这种格式 .set('', resolve(''))
      }
    };
    
    
    

    自定义打包入口文件

     chainWebpack:config => {
        // 产品发布阶段打包入口的修改
        // 判断config处在什么模式,通过.when(), 而process.env.NODE_ENV可以拿到编译模式
        config.when(process.env.NODE_ENV === 'production',config => {
          // 默认打包入口,清除,再添加自己的打包路径
          config.entry('app').clear().add('./src/main-prod.js')
        })
    
        // 产品开发阶段打包入口的修改
        config.when(process.env.NODE_ENV === 'development',config => {
          config.entry('app').clear().add('./src/main-dev.js')
        })
      }
    

    outputDir

    Type: string
    Default: dist

    作用:
    设置项目打包生成的文件的存储目录,可以是静态路径也可以是相对路径。

    注意:相对路径是相对于项目文件当前的根路径。

    用法:

    module.exports = {
      publicPath: './', // 基本路径
      outputDir: 'dist', // 输出文件目录
    }
    

    在这里插入图片描述
    在这里插入图片描述

    // vue.config.js 配置说明
    //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
    // 这里只列一部分,具体配置参考文档
    module.exports = {
        // 部署生产环境和开发环境下的URL。
        // 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上
        //例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 baseUrl 为 /my-app/。
        //baseUrl 从 Vue CLI 3.3 起已弃用,请使用publicPath
        //baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",
        publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
    
        // outputDir: 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)
        outputDir: "mycli",
        //用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)
        assetsDir: "assets",
        //指定生成的 index.html 的输出路径 (打包之后,改变系统默认的index.html的文件名)
        // indexPath: "myIndex.html",
        //默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)
        filenameHashing: false,
    
        // lintOnSave:{ type:Boolean default:true } 问你是否使用eslint
        lintOnSave: true,
        //如果你想要在生产构建时禁用 eslint-loader,你可以用如下配置
        // lintOnSave: process.env.NODE_ENV !== 'production',
    
        //是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右。(默认false)
        // runtimeCompiler: false,
    
        /**
         * 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
         * 打包之后发现map文件过大,项目文件体积很大,设置为false就可以不输出map文件
         * map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。
         * map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。
         * */
        productionSourceMap: false,
    
        // 它支持webPack-dev-server的所有选项
        devServer: {
            host: "0.0.0.0",
            port: 8080, // 端口号
            https: false, // https:{type:Boolean}
            open: true, //配置自动启动浏览器
            // proxy: 'http://localhost:8000' // 配置跨域处理,只有一个代理
            // 配置多个代理
            proxy: {
                "/api": {
                    target: "http://x.xxx:8000", // 要访问的接口域名
                    ws: true, // 是否启用 websockets
                    changeOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
                    pathRewrite: {
                        "^/api": "" //这里理解成用'/api'代替target里面的地址,比如我要调用'http://111.74.112.183:2021/user/edit',直接写'/api/user/edit'即可
                    }
                }
            }
        }
    };
    
    
    module.exports = {
      // 基本路径
      publicPath: process.env.NODE_ENV === 'production'
        ? '/'
        : '/',
      // 输出文件目录
      outputDir: 'dist', // 默认dist
      // 用于嵌套生成的静态资产(js,css,img,fonts)目录
      // assetsDir: '',
      // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
      indexPath: 'index.html', // Default: 'index.html'
      filenameHashing: true,
      // 构建多页时使用
      pages: undefined,
      // eslint-loader是否在保存的时候检查
      lintOnSave: true,
      // 是否使用包含运行时编译器的Vue核心的构建
      runtimeCompiler: false,
      // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来
      transpileDependencies: [],
      // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
      productionSourceMap: false,
      // 如果这个值是一个对象,则会通过 webpack-merge 合并到最终的配置中。如果这个值是一个函数,则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西,也可以返回一个被克隆或合并过的配置版本。
      configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
          // 为生产环境修改配置...
        } else {
          // 为开发环境修改配置...
        }
      },
      // 是一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
      chainWebpack: config => {
        /*config.module
          .rule('images')
          .use('url-loader')
            .loader('url-loader')
            .tap(options => {
              // 修改它的选项...
              return options
            })*/
      },
      // css相关配置
      css: {
        // 启用 CSS modules
        modules: false,
        // 是否使用css分离插件
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项 举例如下 给每个css文件引入 variables.scss文件
        loaderOptions: {
        	scss: {
            	prependData: `
              	@import "~@/styles/variables.scss";
            	`
          	}
        },
      },
      // webpack-dev-server 相关配置
      devServer: {
        host: '0.0.0.0',
        port: 8080,
        https: false,
        open: true,
        hotOnly: false,
        proxy: null, // 设置代理
        before: app => {},
      },
      // PWA 插件相关配置
      pwa: {},
      // 第三方插件配置
      pluginOptions: {
      // ...
      }
    }
    

    css的loaderOptions问题
    在这里插入图片描述

    vue.config.js 打包配置文件记录

    展开全文
  • 本人是个菜鸡,多处借鉴学习,综合整理出来这篇比较全面的 config配置文件说明。

    1.1 项目目录介绍

    在这里插入图片描述

    目录/文件说明详解
    build项目构建(webpack)相关代码详解
    config配置目录,包括端口号等详解
    node_modulesnpm 加载的项目依赖模块详解
    src这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
     ♞ assets:放置一些图片,如 logo
     ♞ components:放置一些组件
     ♞ views:页面(视图)组件
     ♞ router.js:路由脚本文件
     ♞ App.vue:项目入口文件
     ♞ main.js::项目的核心文件
    详解
    static静态资源目录,如图片、字体等详解
    test初始测试目录,可删除详解
    .xxxx 文件这些是一些配置文件,包括语法配置,git 配置等
    index.html首页入口文件
    package.json项目配置文件详解
    README.md项目的说明文档,markdown 格式





    1.2 config 目录

    在这里插入图片描述

    目录/文件说明
    dev.env.js开发环境配置
    index.js主要配置
    prod.env.js生产环境配置
    test.env.js测试环境配置

    1.2.1 index.js

    'use strict'
    // Template version: 1.3.1
    // see http://vuejs-templates.github.io/webpack for documentation.
    // 引入 node.js 的路径模块
    const path = require('path')
    
    module.exports = {
      dev: {
    
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        // 建一个虚拟 api 服务器用来代理本机的请求,只能用于开发模式
        proxyTable: {},
    
        // 服务 host
        host: 'localhost',
        // 服务端口号
        port: 8080,
        // 自动打开浏览器浏览器
        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',
    
        // 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: {
        // 下面是相对路径的拼接,假如当前跟目录是 config,那么下面配置的 index 属性的属性值就是 dist/index.html
        index: path.resolve(__dirname, '../dist/index.html'),
    
        // 定义的是静态资源的根目录 也就是 dist 目录
        assetsRoot: path.resolve(__dirname, '../dist'),
        // 定义的是静态资源根目录的子目录 static,也就是 dist 目录下面的 static
        assetsSubDirectory: 'static',
        // 定义的是静态资源的公开路径,也就是真正的引用路径
        assetsPublicPath: '/',
    
        /**
         * Source Maps
         */
        productionSourceMap: true,
        // https://webpack.js.org/configuration/devtool/#production
        devtool: '#source-map',
    
        // 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
        // 是否压缩代码
        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
        // 编译完成后的报告,可以通过设置值为 true 和 false 来开启或关闭
        bundleAnalyzerReport: process.env.npm_config_report
      }
    }
    

    1.2.2 dev.env.js

    'use strict'
    // 配置文件合并模块
    const merge = require('webpack-merge')
    // 导入 prod.env.js 配置文件
    const prodEnv = require('./prod.env')
    
    module.exports = merge(prodEnv, {
      // 导出一个对象,NODE_ENV 是一个环境变量,指定 development 环境
      NODE_ENV: '"development"'
    })
    

    1.2.2 prod.env.js

    'use strict'
    module.exports = {
      // 导出一个对象,NODE_ENV 是一个环境变量,指定 production 环境
      NODE_ENV: '"production"'
    }
    

    1.2.2 test.env.js

    'use strict'
    // 配置文件合并模块
    const merge = require('webpack-merge')
    // 导入 dev.env.js 配置文件
    const devEnv = require('./dev.env')
    
    module.exports = merge(devEnv, {
      // 导出一个对象,NODE_ENV 是一个环境变量,指定 testing 环境
      NODE_ENV: '"testing"'
    })
    
    展开全文
  • vue.config.js 的配置 官方文档:... 和vue cli2 相比文件目录少了很多配置,没有了build和config目录,那么像vue cli2 之前的关于端口号的配置,打包之后路径的配置,图片的配置 等等,应该去哪里配置呢,vue cli...

    vue.config.js 的配置 官方文档:https://cli.vuejs.org/zh/config/#vue-config-js 

        最近安装了下vue cli3版本,查看链接。 和vue cli2 相比文件目录少了很多配置,没有了build和config目录,那么像vue cli2 之前的关于端口号的配置,打包之后路径的配置,图片的配置 等等,应该去哪里配置呢,vue cli3 可以在项目根目录新建一个vue.config.js文件,像之前的很多繁琐配置,都可以在这个文件里配置啦。
        官方是这样说的。vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。

    // vue.config.js 配置说明
    //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
    // 这里只列一部分,具体配置参考文档
    module.exports = {
      // 部署生产环境和开发环境下的URL。
      // 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上
      //例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 baseUrl 为 /my-app/。
          //baseUrl 从 Vue CLI 3.3 起已弃用,请使用publicPath
        //baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",
        publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
    
      // outputDir: 在npm run build 或 yarn build 时 ,生成文件的目录名称
      outputDir: "mycli3",
      //用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)
      assetsDir: "assets",
      //指定生成的 index.html 的输出路径  (打包之后,改变系统默认的index.html的文件名)
      // indexPath: "myIndex.html",
      //默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)
      filenameHashing: false,
    
      //   lintOnSave:{ type:Boolean default:true } 问你是否使用eslint
      lintOnSave: true,
      //如果你想要在生产构建时禁用 eslint-loader,你可以用如下配置
      // lintOnSave: process.env.NODE_ENV !== 'production',
    
      //是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右。(默认false)
      // runtimeCompiler: false,
    
      /**
       * 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
       *  打包之后发现map文件过大,项目文件体积很大,设置为false就可以不输出map文件
       *  map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。
       *  有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。
       * */
      productionSourceMap: false,
    
      // 它支持webPack-dev-server的所有选项
      devServer: {
        host: "localhost",
        port: 1111, // 端口号
        https: false, // https:{type:Boolean}
        open: true, //配置自动启动浏览器
        // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
    
        // 配置多个代理
        proxy: {
          "/api": {
            target: "<url>",// 要访问的接口域名
            ws: true,// 是否启用websockets
            changeOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
            pathRewrite: {
                '^/api': '' //这里理解成用'/api'代替target里面的地址,比如我要调用'http://40.00.100.100:3002/user/add',直接写'/api/user/add'即可
              }
          },
          "/foo": {
            target: "<other_url>"
          }
        }
      }
    };
    

     

    关于vue cli3的安装,可以参考:https://blog.csdn.net/qq_36407748/article/details/80739787

                                                        https://blog.csdn.net/alice_124/article/details/81082230

                                                        http://www.cnblogs.com/vuenote/p/9323831.html

     

    展开全文
  • vue-cli配置参考 module.exports={ //部署应用包时的基本url。 //baseUrl:"/",//从 Vue CLI 3.3 起已弃用 publicPath:"/", //默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 ...

    本文配置是根据官网写的。vue-cli配置参考

    module.exports={
        //部署应用包时的基本url。
        //baseUrl:"/",//从 Vue CLI 3.3 起已弃用
        publicPath:"/",
        //默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/。
        //如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 publicPath 为 /my-app/。
        //这个值也可以被设置为空字符串 ('') 或是相对路径 ('./'),这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径,也可以用在类似 Cordova hybrid 应用的文件系统中。
        //也可以使用三元运算符配置开发和正式环境上不同的路径
    
        outputDir:"dist",//打包后生成的生产环境构建文件的目录,dist是默认值。默认情况下每次打包都会清空上次打包文件(构建时传入 --no-clean 可关闭该行为)。
        //官方提示:始终使用outputDir,而不要修改 webpack 的 output.path。
        assetsDir:"",//放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
        indexPath:"index.html",//指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
        filenameHashing:true,//默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而,这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML,你可以通过将这个选项设为 false 来关闭文件名哈希。
        
        //默认是undefined,配置类型是Object,这也是多页面应用的所需要配置的(具体方式,请先找度娘)
        pages:{
            index:{
              // page 的入口
              entry: 'src/index/main.js',
              // 模板来源
              template: 'public/index.html',
              // 在 dist/index.html 的输出
              filename: 'index.html',
              // 当使用 title 选项时,
              // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
              title: 'Index Page',
              // 在这个页面中包含的块,默认情况下会包含
              // 提取出来的通用 chunk 和 vendor chunk。
              chunks: ['chunk-vendors', 'chunk-common', 'index']
            },
            // 当使用只有入口的字符串格式时,
            // 模板会被推导为 `public/subpage.html`
            // 并且如果找不到的话,就回退到 `public/index.html`。
            // 输出文件名会被推导为 `subpage.html`。
            subpage: 'src/subpage/main.js'    
        },
    
        lintOnSave:true,//在保存后eslint检查代码。将值设置为'error'是把错误直接输出为编译错误。process.env.NODE_ENV !== 'production',在生产环境上设为false。
    
        
        runtimeCompiler:false,//是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右。
        transpileDependencies:[],//默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来。
        productionSourceMap:true,//如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
        //在打包完成后文件夹中有.map文件,他的作用是在打包完成后,如果运行时报错,没有.map文件不能找到报错信息的准确位置。
        
        crossorigin:undefined,//设置类型是Sring,设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。
        integrity:false,//在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。如果你构建后的文件是部署在 CDN 上的,启用该选项可以提供额外的安全性。
        //需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。
        //另外,当启用 SRI 时,preload resource hints 会被禁用,因为 Chrome 的一个 bug 会导致文件被下载两次。
        configureWebpack:Object|Function,//如果这个值是一个对象,则会通过 webpack-merge 合并到最终的配置中。
        //如果这个值是一个函数,则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西,也可以返回一个被克隆或合并过的配置版本。
        
        chainWebpack:Function,//是一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
        
        //css.loaderOptions:{},//Object,默认是{},向 CSS 相关的 loader 传递选项
        css: {
            modules:false,//默认情况下,只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。设置为 true 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块。
            extract:Boolean,//生产环境下是 true,开发环境下是 false,是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
            //同样当构建 Web Components 组件时它总是会被禁用 (样式是 inline 的并注入到了 shadowRoot 中)。
            //当作为一个库构建时,你也可以将其设置为 false 免得用户自己导入 CSS。
            //提取 CSS 在开发环境模式下是默认不开启的,因为它和 CSS 热重载不兼容。然而,你仍然可以将这个值显性地设置为 true 在所有情况下都强制提取。
            sourceMap:false,//Boolean,是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能。
            loaderOptions: {
              css: {
                // 这里的选项会传递给 css-loader
              },
              postcss: {
                // 这里的选项会传递给 postcss-loader
              }
            }
         }
         //支持的 loader 有:css-loader,postcss-loader,sass-loader,less-loader,stylus-loader
        
        devServer:{
            clientLogLevel:'silent' | 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'none' | 'warning',//使用内联模式时,DevTools中的控制台将显示消息,例如在重新加载之前,错误之前或启用热模块更换时。默认为info
            historyApiFallback: true,//使用HTML5历史记录API时,index.html可能必须提供该页面以代替任何404回复。devServer.historyApiFallback默认情况下禁用。通过传递启用它
            hot: true,//热模块替换,就是热更新页面
            compress: true,//为所服务的一切启用gzip压缩
            host: 'localhost',//指定要使用的主机。默认情况下这是localhost。
            port: 8080//端口号,
            //所有 webpack-dev-server 的选项都支持。注意:
            //有些值像 host、port 和 https 可能会被命令行参数覆写。
            //有些值像 publicPath 和 historyApiFallback 不应该被修改,因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。
            
            //proxy:"url地址",//前端应用和后台API服务没有运行在一个主机上,设置此项在开发环境下代理到API服务器。
            proxy:{//配置不同的后台API地址
                '/api': {
                    target: '<url>',
                    ws: true,
                    changeOrigin: true,
                    pathRewrite: {
                      "^/api": "/"
                    }
                  },
                  '/foo': {
                    target: '<other_url>'
                  }
            }
        },
    
        parallel:require('os').cpus().length > 1,//Boolean,是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用,仅作用于生产构建。
        
       pwa:{},//向 PWA 插件传递选项。
       
       pluginOptions:{},//一个不进行任何 schema 验证的对象,因此它可以用来传递任何第三方插件选项
    
    
    }
    

    1.下载安装vue-cli3,这里我使用npm安装

     

    npm install -g @vue/cli
    
    

    如果已经安装之前版本(1.x或2.x)需要先卸载,再安装新的版本。
    安装完成后可以通过vue --version命令查看版本

    2.创建一个项目

    vue-cli3和之前创建一个项目的命令不同

     

    vue create project-name    // vue-cli3
    vue init webpack project-name    //vue-cli2
    
    

    Vue-cli3 搭建的项目 界面想对之前较为简洁

    之前的build和config文件夹不见了,那么应该如何配置 如webpack等的配那

    只需要在项目的根目录下新建 vue.config.js 文件(是根目录,不是src目录)

    语法

     

    const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
    
    console.log("process.env.NODE_ENV:" + process.env.NODE_ENV);
    const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
    const path = require('path')
    const CompressionWebpackPlugin = require('compression-webpack-plugin');
    const productionGzipExtensions = ['js', 'css']
    const resolve = dir => path.resolve(__dirname, dir)
    
    module.exports = {
        publicPath: './', // 默认'/',部署应用包时的基本 URL
        outputDir: 'dist', // 'dist', 生产环境构建文件的目录
        assetsDir: '',  // 相对于outputDir的静态资源(js、css、img、fonts)目录
        lintOnSave: false,
        runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
        productionSourceMap: false,  // 生产环境的 source map
        // CSS 相关选项
        css: {
            // 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)
            // 也可以是一个传递给 `extract-text-webpack-plugin` 的选项对象
            extract: true,
    
            // 是否开启 CSS source map?
            sourceMap: false,
    
            // 为预处理器的 loader 传递自定义选项。比如传递给
            // sass-loader 时,使用 `{ sass: { ... } }`。
            loaderOptions: {},
    
            // 为所有的 CSS 及其预处理文件开启 CSS Modules。
            // 这个选项不会影响 `*.vue` 文件。
            modules: false
        },
    
        // 在生产环境下为 Babel 和 TypeScript 使用 `thread-loader`
        // 在多核机器下会默认开启。
        parallel: require('os').cpus().length > 1,
        pwa: {},
    
        chainWebpack: config => {
            // 修复HMR
            config.resolve.symlinks(true);
            //修复 Lazy loading routes Error
            config.plugin('html').tap(args => {
                args[0].chunksSortMode = 'none';
                return args;
            });
    
            // 添加别名
            config.resolve.alias
                .set('@', resolve('src'))
                .set('assets', resolve('src/assets'))
                .set('components', resolve('src/components'))
                .set('layout', resolve('src/layout'))
                .set('base', resolve('src/base'))
                .set('static', resolve('src/static'));
    
            //压缩图片
            // config.module
            //     .rule("images")
            //     .use("image-webpack-loader")
            //     .loader("image-webpack-loader")
            //     .options({
            //         mozjpeg: {progressive: true, quality: 65},
            //         optipng: {enabled: false},
            //         pngquant: {quality: "65-90", speed: 4},
            //         gifsicle: {interlaced: false},
            //         webp: {quality: 75}
            //     });
        },
        configureWebpack: config => {
    
            if (IS_PROD) {
                const plugins = []
                plugins.push(
                    new UglifyJsPlugin({
                        uglifyOptions: {
                            compress: {
                                warnings: true,
                                drop_console: true,
                                drop_debugger: true,
                                pure_funcs: ['console.log'] //移除console
                            },
                            mangle: false,
                            output: {
                                beautify: true,//压缩注释
                            }
                        },
                        sourceMap: false,
                        parallel: true,
                    })
                )
                plugins.push(
                    new CompressionWebpackPlugin({
                        filename: '[path].gz[query]',
                        algorithm: 'gzip',
                        test: productionGzipExtensions,
                        threshold: 10240,
                        minRatio: 0.8
                    })
                )
    
                //去掉 console.log
                plugins.push(
                    new UglifyJsPlugin({
                        uglifyOptions: {
                            compress: {
                                warnings: true,
                                drop_console: true,
                                drop_debugger: true,
                                pure_funcs: ['console.log']//移除console
                            }
                        },
                        sourceMap: false,
                        parallel: true
                    })
                );
                config.plugins = [...config.plugins, ...plugins]
            }
    
            // 打包分析
            if (process.env.IS_ANALYZ) {
                config.plugin('webpack-report')
                    .use(BundleAnalyzerPlugin, [{
                        analyzerMode: 'static',
                    }]);
            }
    
            // //配置 externals
            // //防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖
            // config.externals = {
            //     'vue': 'Vue',
            //     'element-ui': 'ELEMENT',
            //     'vue-router': 'VueRouter',
            //     'vuex': 'Vuex',
            //     'axios': 'axios'
            // }
        },
        devServer: {
            // overlay: {
            //   warnings: true,
            //   errors: true
            // },
            open: IS_PROD,
            host: '0.0.0.0',
            port: 8080,
            https: false,
            hotOnly: false,
            proxy: {
                '/api': {
                    target: process.env.VUE_APP_BASE_API || 'http://127.0.0.1:8080',
                    changeOrigin: true
                }
            }
        }
    };
    

    注意事项:执行yarn build或npm run build 的之前,请先设置下环境,就是输入下面这个命令行。

     

    set NODE_ENV=production
    

    配置举例

     

    上图内容做了两块内容,经测试没有问题

    1.将启动端口设置为 8080

    2.设置路径别名

     

    作者:菜鸟搬砖
    链接:https://www.jianshu.com/p/11616f1d4a92
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    作者:逸宸a
    链接:https://www.jianshu.com/p/b001492fc9b9
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

     

    展开全文
  • 使用vue-cli时系统会自动帮我们做好一些通用的配置,当我们需要自己再单独定义一些配置时,只需在项目根目录下创建vue.config.js,然后在这个文件里面添加配置即可。 但是在项目中发现更改vue.config.js的内容后并...
  • 本文章来自转载,主要讲解了vue-cli下的config配置相关文件。(涉及到较复杂的解释将通过标识的方式(如(1))将解释写到单独的注释模块,) //config目录下index.js配置文件 // see ...
  • vue-cli2的build和config文件夹不见了,那么应该如何配置如webpack,别名设置,sourcemap控制,输入文件位置和输出文件位置和输出的方式,压缩js控制,打包webapck日志分析,externals忽略配置(外部引入),调试的...
  • vue.config.js是一个可选的配置文件,该文件必须放在根目录下,必须叫这个名字,必须按照固定的模式且严格遵守JSON的规范。 只有这样才能被@vue/cli-service自动加载,修改整个工程的配置 详细参考:官网 ...
  • Vue CLI 3.3 起已弃用baseUrl,请使用publicPath。...如果应用被部署在一个子路径上,你就需要用这个选项指定这个路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 publicPath 为 /m...
  • vue-cli3.x 配置vue.config.js

    千次阅读 2019-08-08 17:34:21
    vue-cli 3.x 的一些常用配置
  • vue项目 config目录下的index文件配置

    千次阅读 2020-07-12 23:41:10
    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 } } 此文件...
  • vue-config.js配置实战

    万次阅读 2018-11-15 15:04:00
    今天讲述一下vue-config.js配置,我们前面搭建好脚手架会发现,这个对比2.x版本少了很多东西,没有build的配置,也没有webpack的配置,那么问题来了,我们如何去开发我们的项目呢,比如设置代理,打包配置等问题呢?...
  • vue3.x修改端口号配置vue.config.js

    万次阅读 热门讨论 2018-10-30 16:52:47
    首先在根目录创建vue.config.js    vue.config.js 里面代码: module.exports = { /** 区分打包环境与开发环境 * process.env.NODE_ENV==='production' (打包环境) * process.env.NODE_ENV==='...
  • vue-cli3.0 配置vue.config.js

    千次阅读 2018-09-04 10:06:42
    // vue.config.js 配置说明 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions // 这里只列一部分,具体配置参考文档 const fs = require('fs') module.exports = { // 部署生产...
  • Vue-cli3 项目配置 vue.config.js

    千次阅读 2018-11-20 15:45:04
    vue.congig.js文件和 package.json文件在同一级目录 // vue.config.js // 参考文档地址:https://cli.vuejs.org/zh/config/ module.exports = { /** * Name : baseUrl(已经过时,请使用publicP...
  • vue3.0+ 3.x config配置

    千次阅读 2019-06-30 23:12:08
    Vue CLI 3.3 起已弃用,请使用publicPath。 publicPath Type: string Default: ‘/’ 这个值也可以被设置为空字符串 (’’) 或是相对路径 (’./’),这样所有的资源都会被链接为相对路径,这样打出来的包可以被...
  • 由于 vue-cli 3 也学习了 rollup 的零配置思路,所以项目初始化后,没有了以前熟悉的 build 目录,也就没有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件。 但是有些内容...
  • // vue.config.js 配置说明//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions// 这里只列一部分,具体配置参考文档module.exports = { // 部署生产环境和开发环境下的URL。...
  • 最近安装了下vue cli3版本, 和vue cli2 相比文件目录少了很多配置,没有了build和config目录,那么像vue cli2 之前的关于端口号的配置,打包之后路径的配置,图片的配置 等等,应该去哪里配置呢,vue cli3 可以在...
  • vue-cli2创建项目后是自身具有config文件夹,在vue-cli3中创建项目后不会生成相应的配置文件,这里的vue.config.js文件需要自己创建,一般是在项目的根目录下。 下面是根据vue-cli官方文档进行的基本配置,可以直接...
  • //config目录下index.js配置文件 // see http://vuejs-templates.github.io/webpack for documentation. // path是node.js的路径模块,用来处理路径统一的问题 var path = require('path') module.exports = { // ...
  • vue3.0 vue.config.js 配置

    2021-05-31 15:04:12
    vue cli3.0项目中需要配置其他参数时,需要新建文件’vue.config.js’,(这文件名是固定这么写的),与package.json在同一级目录下。 3.0搭建的项目已经取消了config文件夹,所有配置都是在最外层的vue.config.js文件...
  • webpack+vue-cil 配置接口地址代理以及将项目打包到子目录的方法前言很久没有更新关于webpack+vue的内容了。前面承诺过大家告诉大家如何打包到子目录的。由于太忙,也忘记了。今天补充两个知识点给大家。将接口配置...
  • Vue-cli3 配置新项目到原有项目的子目录配置子目录 最近开发的一个新项目放测试服发现各类请求一直报404,发现路径不对了,找了半天原因原来是我的项目被总架构放到了原有项目的一个子目录里。 配置子目录 首先...
  • 最近开发过程中遇到个小需求,需要根据需求动态配置一些静态数据,但我不想直接把这个静态文件引入进来,build时就会把数据打包到js文件中,造成js文件很大;呃呃。。。。(ps:就想给自己找点别扭) 回头看一下项目...
  • vue cli3.0 vue.config.js配置

    千次阅读 2019-01-14 10:21:34
    自己经常用的一套vue.config.js配置  /** * vue.config 配置 * @author maybe */ const path = require('path') // const fs = require('fs') // __dirname 总是指向被执行 js 文件的绝对路径 const resolve =...
  • 解决:vue-cli脚手架搭建的项目,都是默认以根目录形式配置(http://www.xxx.com) ,想要部署在子目录下(http://www.xxx.com/myapp )需要修改相应的配置才能实现。 .env.production文件 # just a flag ENV = '...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,817
精华内容 4,326
关键字:

config配置vue子目录

vue 订阅