Vue Cli 3:vue.config.js配置文件

Vue Cli 3生成的项目结构,没有build、config目录,而是使用vue.config.js来进行配置。

vue.config.js是一个可选的配置文件,如果项目的 (和package.json同级的) 根目录中存在这个文件,那么它会被@vue/cli-service自动加载。

你也可以使用package.json中的vue字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。


一 查看Vue Cli版本

vue --version 3.5.1

二 创建vue.config.js配置文件


module.exports = {

  // baseUrl从 Vue CLI 3.3 起已弃用,请使用publicPath// 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/。// 如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 publicPath 为 /my-app/。  publicPath:

    process.env.NODE_ENV === "production" ? "/production-sub-path/" : "/",

  // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。// 注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。// 默认值'dist'outputDir: "my-app",

  // 放置生成的静态资源 (js、css、img、fonts) 的目录(相对于outputDir目录)。// 默认值''assetsDir: "assets",

  //指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。// 默认值'index.html'indexPath: "myIndex.html",

  // 默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。filenameHashing:false,

  // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。lintOnSave: process.env.NODE_ENV !== "production",

  //是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右。runtimeCompiler:false,

  // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。productionSourceMap:false,

  // 所有 webpack-dev-server 的选项都支持。  devServer: {

    host: "localhost",

    port: 8080,// 端口号https:false,

    open: true,//配置自动启动浏览器// 配置多个代理    proxy: {

      "/api": {

        target: "http://localhost:3000",// 本地模拟数据服务器changeOrigin:true,

        pathRewrite: {

          "^/api": ""// 去掉接口地址中的api字符串        }

      },

      "/foo": {

        target: "http://localhost:8080",// 本地模拟数据服务器changeOrigin:true,

        pathRewrite: {

          "^/foo": ""// 去掉接口地址中的foo字符串        }

      }

    }

  }

};

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容