解决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 相关文章推荐
Vue实现小购物车功能
Dec 21 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
vue实现图书管理系统
Dec 29 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
如何封装Vue Element的table表格组件
Feb 06 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
vue特效之翻牌动画
Apr 20 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
vue使用element-ui按需引入
May 20 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
ThinkPHP3.1查询语言详解
2014/06/19 PHP
php数组键值用法实例分析
2015/02/27 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
初识ThinkPHP控制器
2016/04/07 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
做网页的一些技巧(续)
2007/02/01 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
实践中学习AngularJS表单
2016/03/21 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
tensorflow实现KNN识别MNIST
2018/03/12 Python
Python paramiko模块的使用示例
2018/04/11 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
PyQt实现计数器的方法示例
2021/01/18 Python
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
毕业生求职简历的自我评价
2013/10/23 职场文书
加入学生会演讲稿
2014/04/24 职场文书
施工安全责任书范本
2014/07/24 职场文书
2014年平安夜寄语
2014/12/08 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
2016年情人节广告语
2016/01/28 职场文书