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

 更新时间:2020年12月04日 10:06:41   作者:Winson℡  
这篇文章主要介绍了解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

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

在这里插入图片描述

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

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

相关文章

  • requirejs + vue 项目搭建详解

    requirejs + vue 项目搭建详解

    这篇文章主要介绍了requirejs + vue 项目搭建详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • vue3组合API中setup、 ref、reactive的使用大全

    vue3组合API中setup、 ref、reactive的使用大全

    本文给大家介绍vue3组合API中setup、 ref、reactive的用法,初步了解reactive的使用及具体用法,通过示例代码给大家介绍的非常详细,需要的朋友参考下吧
    2021-06-06
  • 在Vue中获取组件声明时的name属性方法

    在Vue中获取组件声明时的name属性方法

    今天小编就为大家分享一篇在Vue中获取组件声明时的name属性方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue 图片监听鼠标滑轮滚动实现图片缩小放大功能(实现思路)

    Vue 图片监听鼠标滑轮滚动实现图片缩小放大功能(实现思路)

    其实想要实现功能很简单,就是在一张图片上监听鼠标滑轮滚动的事件,然后根据上滚还是下滚实现图片的缩放,这篇文章主要介绍了Vue 实现图片监听鼠标滑轮滚动实现图片缩小放大功能,需要的朋友可以参考下
    2023-03-03
  • vue中实现千位分隔符的示例代码

    vue中实现千位分隔符的示例代码

    本文主要介绍了vue中实现千位分隔符的示例代码,主要两种方法,一种是某一个字段转换,一种是表格table中的整列字段转换,具有一定的参考价值,感兴趣的可以了解一下
    2023-11-11
  • Vue计算属性与监视(侦听)属性的使用深度学习

    Vue计算属性与监视(侦听)属性的使用深度学习

    这篇文章主要介绍了Vue计算属性与监视(侦听)属性的使用,计算属性指的是通过一系列运算之后,最终得到一个值,watch监视(侦听)器允许开发者监视数据的变化,从而针对数据的变化做特定的操作,本文就这两种属性给大家详细讲解,感兴趣的朋友一起学习吧
    2022-11-11
  • 基于vue实现页面滚动加载的示例详解

    基于vue实现页面滚动加载的示例详解

    页面内容太多会导致加载速度过慢,这时可考虑使用滚动加载即还没有出现在可视范围内的内容块先不加载,出现后再加载,所以本文给大家介绍了基于vue实现页面滚动加载的示例,需要的朋友可以参考下
    2024-01-01
  • 在vue-cli创建的项目中使用sass操作

    在vue-cli创建的项目中使用sass操作

    这篇文章主要介绍了在vue-cli创建的项目中使用sass操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue+webpack 打包文件 404 页面空白的解决方法

    vue+webpack 打包文件 404 页面空白的解决方法

    下面小编就为大家分享一篇vue+webpack 打包文件 404 页面空白的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue拖拽组件vuedraggable使用说明详解

    vue拖拽组件vuedraggable使用说明详解

    这篇文章主要为大家详细介绍了vue拖拽组件vuedraggable的使用说明,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04

最新评论