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字符串
}
}
}
}
};
Vue Cli 3:vue.config.js配置文件的更多相关文章
- vue 调用常量的config.js文件
我遇到问题,就是有很多常量需要应用的项目里面.所以需要打算设置一个config.js文件 1.填写config.js 文件 //常量配置 //快递公司名单 对应的页面为: src/pages/othe ...
- [Vue CLI 3] vue inspect 的源码设计实现
首先,请记住: 它在新版本的脚手架项目里面非常重要 它有什么用呢? inspect internal webpack config 能快速地在控制台看到对应生成的 webpack 配置对象. 首先它是 ...
- Webpack探索【2】--- 安装、项目初始化、webpack.config.js配置文件
本文主要讲安装.项目初始化.webpack.config.js配置文件方面的内容.
- Vue CLI及其vue.config.js(一)
有时候我们为了快速搭建一个vue的完整系统,经常会用到vue-cli,vue-cli用起来很方便而且命令简单容易上手,但缺点是在构建的时候我感觉有一些慢,因为CLI 服务 (@vue/cli-serv ...
- 配置vue项目的自定义config.js
[1]不采用脚手架的config文件夹中的配置文件 [2]在static文件夹下,自定义一个congfig.js文件 // 配置开发环境下服务器地址 window.Glod = { pmsApiUrl ...
- 使用@vue/cli搭建vue项目开发环境
当前系统版本 mac OS 10.14.2 1.安装node.js开发环境 前端开发框架和环境都是需要 Node.js vue的运行是要依赖于node的npm的管理工具来实现 <mac OS ...
- [Vue CLI 3] @vue/cli-plugin-eslint 源码分析
熟悉 eslint-loader 的同学一般如下配置: 设置一下几项: test : A condition that must be met(一般是处理对应文件的正则) exclude : A co ...
- webpack.config.js配置文件
1.基本配置 webpack在执行时,除在命令行传入参数,还可以通过指定的配置文件来执行.默认会搜索当前目录下webpack.config.js.这个文件是一个node.js模块,返回一个json格式 ...
- webpack前端构建工具学习总结(三)之webpack.config.js配置文件
Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行.默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一 ...
随机推荐
- 1/n循环节长度
/* * 求1/i的循环节长度的最大值,i<=n */ ; int res[MAXN]; // 循环节长度 int main() { memset(res, , sizeof(res)); in ...
- 年月日联动select下拉菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- EasyUI之DataGrid分页
第一步创建分页DataGrid <table id="dg"> <thead> <tr> <th data-options="f ...
- 【推荐系统】知乎live入门2.细节补充
参考链接 [推荐系统]知乎live入门 目录 1. 综述 2. 召回 3. 用户画像与标签 4. 特征工程 5. 点击率预估 6. 评估 7. 数据标注 8. 推荐 ================= ...
- Docker设置容器开机自启动
设置如下: docker update --restart=always 镜像ID 例如:docker update --restart=always e39a959d7bff. 参考:https:/ ...
- 【转】SPI FLASH与NOR FLASH的区别 详解SPI FLASH与NOR FLASH的不一样
转自:http://m.elecfans.com/article/778203.html 本文主要是关于SPI FLASH与NOR FLASH的相关介绍,并着重对SPI FLASH与NOR FLASH ...
- Codeforces 1215E 状压DP
题意:给你一个序列,你可以交换序列中的相邻的两个元素,问最少需要交换多少次可以让这个序列变成若干个极大的颜色相同的子段. 思路:由于题目中的颜色种类很少,考虑状压DP.设dp[mask]为把mask为 ...
- 文本框的SelectionDirection属性
代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 【leetcode】1091. Shortest Path in Binary Matrix
题目如下: In an N by N square grid, each cell is either empty (0) or blocked (1). A clear path from top- ...
- LeetCode--039--组合总和(java)
给定一个无重复元素的数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的数字可以无限制重复被选 ...