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

2024-09-27 07:22:59

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 CLI4 Vue.config.js标准配置(最全注释)

前言: Vue.js CLI工具不知不觉发展到了4.0时代,CLI给人最直白的感受是没有了build文件夹跟config文件夹,所有的配置都在Vue.config.js完成.那么该文件的配置至关重要.现在我们来看一下最新配置是怎么配置的. 安装 npm i -d vue-cli-configjs // vue.config.js const path = require('path'); const CompressionWebpackPlugin = require("compression
vue-cli3中vue.config.js配置教程详解

前言 vue-cli3推崇零配置,其图形化项目管理也很高大上. 但是vue-cli3推崇零配置的话,导致了跟之前vue-cli2的配置方式都不一样了. 别名设置,sourcemap控制,输入文件位置和输出文件位置和输出的方式,压缩js控制,打包webapck日志分析,externals忽略配置(外部引入),调试的端口配置,proxy接口配置等等的. 有时候还需要我们配置的,因为官方推荐的,并不适用于我们平时的开发所用的. 所以,我的vue.config.js配置是下面这样的.还有一个改hash的
如何配置vue.config.js 处理static文件夹下的静态文件

最近开发过程中遇到个小需求,需要根据需求动态配置一些静态数据,但我不想直接把这个静态文件引入进来,build时就会把数据打包到js文件中,造成js文件很大:呃呃....(ps:就想给自己找点别扭) 回头看一下项目,果断的在根目录下创建一个static/test.json文件,在目标页面下fetch获取这个json文件里的数据: fetch("../static/test.json") .then(res => res.json()) .then(res => { //获取到
详解如何配置vue-cli3.0的vue.config.js

本文介绍了如何配置vue-cli3.0的vue.config.js,分享给大家,具体如下: vue-cli 3 英文文档 vue-cli 3 中文文档 webpack 4 plugins webpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下 vue-cli 3 的项目架构完全抛弃了 vue-cli 2 的原有架构,3 的设计更加抽象和简洁(此处后续可以详细介绍) vue
Vue-cli3项目配置Vue.config.js实战记录

Vue-cli3 搭建的项目界面想对之前较为简洁之前的build和config文件夹不见了,那么应该如何配置如webpack等的配那只需要在项目的根目录下vue.config.js 文件(是根目录,不是src目录语法 module.exports = { // 基本路径 baseUrl: '/', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build
解决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://vu
Vue创建项目后没有webpack.config.js(vue.config.js)文件的解决

目录 webpack.config.js文件没有的原因手动创建一个 vue.config.js 没有配置vue.config.js之前,打包后的文件如下配置后总结 webpack.config.js文件没有的原因 Vue 项目中 vue.config.js 文件就等同于 webpack 的 webpack.config.js. vue-cli3 之后创建的时候并不会自动创建 vue.config.js,因为这个是个可选项,所以一般都是需要修改 webpack 的时候才会自己创建一个 vue
普通js文件里面如何访问vue实例this指针

目录普通js文件里访问vue实例this指针 then使用函数无法访问vue实例化的this 问题原因解决普通js文件里访问vue实例this指针 main.js 文件,暴露出vue实例 Vue.use(VueAxios) const vue = new Vue({ router, store, created: bootstrap, render: h => h(App) }).$mount('#app') export default vue js 文件中,使用实例
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法

使用自己基于vue-cli 2.X改造的前端多页脚手架有近1年多时间了,一直没机会升级3.0版本开始零零碎碎开始写一些功能,顺便分享一下 const path = require('path') const glob = require('glob') /** 获取多页的入口脚本和模板 */ const getPages = (() => { const [ globPathHtml, globPathJs, pages, tempSet ] = [ ['./src/modules/**/in
vueCli4如何配置vue.config.js文件

目录 vueCli4配置vue.config.js vueCli4配置文件路径别名及使用项目根目录下创建vue.config.js文件配置文件中写入一下代码别名的使用 vueCli4配置vue.config.js const path = require('path') const CompressionPlugin = require('compression-webpack-plugin') //cnpm install --save-dev compression-webpack-p
vue加载自定义的js文件方法

在做项目中需要自定义弹出框.就自己写了一个. 效果图遇见的问题怎么加载自定义的js文件 vue-插件这必须要看.然后就是自己写了. export default{ install(Vue){ var tpl; // 弹出框 Vue.prototype.showAlter = (title,msg) =>{ var alterTpl = Vue.extend({ // 1.创建构造器,定义好提示信息的模板 template: '<div id="bg">' + '&
vue项目中在外部js文件中直接调用vue实例的方法比如说this

一般我们都是在main.js中引入vue,然后在vue文件中直接使用this(this指向的是vue实例),但是在实际开发中,我们往往会引入外部的js文件使用this,这个this就会指向window,并不是我们期待的vue实例,那么就需要重新引入vue文件(import Vue from 'vue'),这样很麻烦.在目前项目中我使用的方法是mian.js导出vue实例,然后在需要使用的js中引入. 步骤一:main.js导出vue实例 var vue = new Vue({ el: '#app
vue3如何自定义js文件(插件或配置)

目录 vue3自定义js文件举例腾讯防水墙js调用文件 vue加载自定义的js文件效果图遇见的问题使用 vue3自定义js文件在vue3中自定义的js文件,如果需要设置全局this.xxx调用方式的话,需要给方法.变量.常量export出去,调用install()方法插件的功能范围没有严格的限制——一般有下面几种: 添加全局方法或者 property.如:vue-custom-element 添加全局资源:指令/过滤器/过渡等.如:vue-touch 通过全局混入来添加一些组件选项.
Node.js 文件夹目录结构创建实例代码

第一次接触NodeJS的文件系统就被它的异步的响应给搞晕了,后来发现NodeJS判断文件夹是否存在和创建文件夹是还有同步方法的,但是还是想尝试使用异步的方法去实现. 使用的方法: fs.exists(path, callback); fs.mkdir(path, [mode], callback); 实现文件夹目录结构的创建代码实现如下: //创建文件夹 function mkdir(pos, dirArray,_callback){ var len = dirArray.length; con
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题

1. os.listdir()概述 os.listdir() 方法用于返回指定的文件夹包含的文件或文件夹的名字的列表. 例如: dir ='F:/Home_01/img'#当前目录 filenames=os.listdir(dir)#filenames存储dir下的所有文件名. 注意:os.listdir()返回的文件名不一定是顺序的,也就是说结果是不固定的,如下图,则filenames[0]有可能为'22.jpg',而不是我们所希望的'11.jpg'. 解决办法: filenames=os.l

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

相关推荐

随机推荐