解决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防抖与节流
Nov 24 Vue.js
详解Vue 的异常处理机制
Nov 30 Vue.js
用vue设计一个日历表
Dec 03 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
vue组件是如何解析及渲染的?
Jan 13 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
vue常用高阶函数及综合实例
Feb 25 Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
vue+spring boot实现校验码功能
May 27 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
PHP入门学习笔记之一
2010/10/12 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
php中ob函数缓冲机制深入理解
2015/08/03 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
JSON 学习之完全手册 图文
2007/05/29 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
当达到输入长度时表单自动切换焦点
2014/04/06 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
javascript操作cookie
2017/01/17 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
Python专用方法与迭代机制实例分析
2014/09/15 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
超实用的 30 段 Python 案例
2019/10/10 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
Python实现弹球小游戏
2020/08/01 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
学生个人求职自荐信格式
2013/09/23 职场文书
党校学习个人总结
2015/02/15 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers