解决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文件夹内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue实现的上传图片到数据库并显示到页面功能示例

    vue实现的上传图片到数据库并显示到页面功能示例

    这篇文章主要介绍了vue实现的上传图片到数据库并显示到页面功能,结合实例形式分析了基于vue.js的数据库操作及页面图片显示相关操作技巧,需要的朋友可以参考下
    2018-03-03
  • vue3+el-table封装示例详解(编辑、删除、查看详情按钮一起封装)

    vue3+el-table封装示例详解(编辑、删除、查看详情按钮一起封装)

    在Vue3中,利用Element Plus UI库封装表格组件,实现编辑、删除和查看详情的功能,通过定义tableData和tableDataHeader来管理表格数据和表头,其中tableData通常从后端获取,而tableHeader可根据具体需求自定义,感兴趣的朋友跟随小编一起看看吧
    2024-09-09
  • 一文详析vue3 Props的用法(父传子)

    一文详析vue3 Props的用法(父传子)

    这篇文章主要给大家介绍了关于vue3 Props的用法(父传子)的相关资料,在Vue3中Props用于组件间数据传递,允许类型检查和默认值设置,文中将用法介绍的非常详细,需要的朋友可以参考下
    2024-10-10
  • vue实现将一个数组内的相同数据进行合并

    vue实现将一个数组内的相同数据进行合并

    今天小编就为大家分享一篇vue实现将一个数组内的相同数据进行合并,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 一步步带你用vite简单搭建ts+vue3全家桶

    一步步带你用vite简单搭建ts+vue3全家桶

    Vue3与TS的联合是大趋势,下面这篇文章主要给大家介绍了关于用vite简单搭建ts+vue3全家桶的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • vue自定义实例化modal弹窗功能的实现

    vue自定义实例化modal弹窗功能的实现

    这篇文章主要介绍了vue自定义实例化modal弹窗,Vue.extend 属于Vue的全局 api,在实际业务开发中我们很少使用,因为相比常用的 Vue.component写法使用 extend 步骤要更加繁琐一些,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下
    2022-09-09
  • Vue状态机的开启与停止操作详细讲解

    Vue状态机的开启与停止操作详细讲解

    Vuex是专门为Vuejs应用程序设计的状态管理工具,这篇文章主要给大家介绍了关于Vuex状态机快速了解与实例应用的相关资料,需要的朋友可以参考下
    2023-01-01
  • Vue数据更新视图未更新的几种解决方案

    Vue数据更新视图未更新的几种解决方案

    本文主要介绍在vue项目中,遇到数据更新但视图不更新的情况时,无法使用watch监听、无法使用this.$set方法,同时使用this.$forceUpdate()无效时,所使用的解决方案,需要的朋友可以参考下
    2024-02-02
  • vue中electron框架自定义外部配置文件的配置与读取办法

    vue中electron框架自定义外部配置文件的配置与读取办法

    使用Electron开发本地跨平台的本地程序时,有时需要添加一些程序的配置文件,下面这篇文章主要给大家介绍了关于vue中electron框架自定义外部配置文件的配置与读取的相关资料,需要的朋友可以参考下
    2023-12-12
  • vue使用element-ui实现表单验证

    vue使用element-ui实现表单验证

    这篇文章主要为大家详细介绍了vue使用element-ui实现表单验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12

最新评论