解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题


Posted in Vue.js onDecember 04, 2020

1.在vue项目根目录下新建vue.config.js(不是在src下面)
vue.config.js配置文件:

module.exports = {
 // 基本路径 baseURL已经过时
 publicPath: './', 
 // 输出文件目录
 outputDir: 'dist',
 // eslint-loader 是否在保存的时候检查
 lintOnSave: true,
 // use the full build with in-browser compiler?
 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
 // compiler: false,
 // webpack配置
 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
 chainWebpack: () => {},
 configureWebpack: () => {},
 // vue-loader 配置项
 // https://vue-loader.vuejs.org/en/options.html
 // vueLoader: {},
 // 生产环境是否生成 sourceMap 文件
 productionSourceMap: true,
 // css相关配置
 css: {
  // 是否使用css分离插件 ExtractTextPlugin
  extract: true,
  // 开启 CSS source maps?
  sourceMap: false,
  // css预设器配置项
  loaderOptions: {},
  // 启用 CSS modules for all css / pre-processor files.
  modules: false
 },
 // use thread-loader for babel & TS in production build
 // enabled by default if the machine has more than 1 cores
 parallel: require('os').cpus().length > 1,
 // 是否启用dll
 // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
 // dll: false,
 // PWA 插件相关配置
 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
 pwa: {},
 // webpack-dev-server 相关配置
 devServer: {
  open: process.platform === 'darwin',
  disableHostCheck: true,
  host: 'www.test.com',//如果是真机测试,就使用这个IP
  port: 1234,
  https: false,
  hotOnly: false,
  before: app => {}
 },
 // 第三方插件配置
 pluginOptions: {
  // ...
 }
 }

2.配置域名:
在vue.config.js文件找到 devServer: {}配置这两个参数:

host: 'www.test.com',//自定义域名
 port: 1234,//自定义端口

在本地hosts末尾添加127.0.0.1 www.test.com

解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题

重启项目==>使用域名加端口号访问:http://www.test.com:1234

到此这篇关于解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的文章就介绍到这了,更多相关Vue-cli3没有vue.config.js文件夹内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
springboot+VUE实现登录注册
May 27 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
vue ref如何获取子组件属性值
Mar 31 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 #Vue.js
vue使用echarts图表自适应的几种解决方案
Dec 04 #Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 #Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 #Vue.js
vue表单验证之禁止input输入框输入空格
Dec 03 #Vue.js
对vue生命周期的深入理解
Dec 03 #Vue.js
用vue设计一个日历表
Dec 03 #Vue.js
You might like
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
隐性调用php程序的方法
2015/06/13 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
使用Node.js配合Nginx实现高负载网络
2015/06/28 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
javascript实现的时间格式加8小时功能示例
2019/06/13 Javascript
通过实例解析js简易模块加载器
2019/06/17 Javascript
python中Flask框架简单入门实例
2015/03/21 Python
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
Python docx库用法示例分析
2019/02/16 Python
django使用xadmin的全局配置详解
2019/11/15 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
应届生程序员求职信
2013/11/05 职场文书
会计应届生的自荐信
2013/12/13 职场文书
工作表扬信的范文
2014/01/10 职场文书
大学生自我鉴定书
2014/03/24 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
护理专业自荐书
2014/06/04 职场文书
销售辞职信范文
2015/03/02 职场文书
年底个人总结范文
2015/03/10 职场文书
留学推荐信中文范文
2015/03/26 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书