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.config.js。

vue-cil3之后创建项目后的目录结构如下

├── README.md  					# 说明
|-- dist                       	# 打包后文件夹
├── babel.config.js 			# babel语法编译
├── package-lock.json
├── public						# 静态文件夹,这类资源将会直接被拷贝，而不会经过 webpack 的处理。
│   ├── favicon.ico
│   └── index.html				#入口页面
└── src						    # 源码目录
    ├── App.vue - 页面
    ├── assets  - 静态目录,这类引用会被 webpack 处理。
    │   └── logo.png
    ├── components 组件
    │   └── HelloWorld.vue
    └── main.js                  # 入口文件，加载公共组件
│—— vue.config.js                # 配置文件，需自行配置
│—— .gitignore          		 # git忽略上传的文件格式
│—— babel.config.js   			 # babel语法编译
│—— package.json       	         # 项目基本信息
│—— .env       	                 # 环境变量和模式，需自行配置
│—— .eslintrc.js    		  	 # ES-lint校验

开发者一般不需要再去知道 webpack 做了什么，所以没有暴露 webpack 的配置文件，但你依然可以创建 vue.config.js 去修改默认的 webpack。

Vue-cli3+ 和 Vue-cli2 的最大区别：在于内置了很多配置，没有 build 文件夹和 config 的配置。但是在开发中，避免不了的还是需要个性化的配置，这里讲一下 vue.config.js 的配置。

手动创建一个 vue.config.js

module.exports = {
  publicPath: './',  // 基本路径
  outputDir: 'dist', // 构建时的输出目录
  assetsDir: 'static', // 放置静态资源的目录
  indexPath: 'index.html', // html 的输出路径
  filenameHashing: true, // 文件名哈希值
  lintOnSave: false, // 是否在保存的时候使用 `eslint-loader` 进行检查。

  // 组件是如何被渲染到页面中的？ （ast：抽象语法树；vDom：虚拟DOM）
  // template ---> ast ---> render ---> vDom ---> 真实的Dom ---> 页面
  // runtime-only：将template在打包的时候，就已经编译为render函数
  // runtime-compiler：在运行的时候才去编译template
  runtimeCompiler: false,

  transpileDependencies: [], // babel-loader 默认会跳过 node_modules 依赖。
  productionSourceMap: false, // 是否为生产环境构建生成 source map

  //调整内部的 webpack 配置
  configureWebpack: () => { },

  chainWebpack: () => { },

  // 配置 webpack-dev-server 行为。
  devServer: {
    open: true, // 编译后默认打开浏览器
    host: '0.0.0.0',  // 域名
    port: 8080,  // 端口
    https: false,  // 是否https
    // 显示警告和错误
    overlay: {
      warnings: false,
      errors: true
    },
  }
}

没有配置vue.config.js之前，打包后的文件如下

注意：此时直接打开index.html文件可能页面的图片没有显示

配置后

注意：此时dist文件底下会创建一个static文件夹，用来存放静态文件，如css、js、font、img,

此时打开index.html文件页面图片可以正常显示

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue前端vue.config.js简介

    目录 vue.config.js publicPath outputDir assetsDir devServer process.env.VUE_APP_BASE_API PS:vue.config.js详解 vue.config.js vue项目的配置文件,需要严格遵照 JSON 的格式来写.结构如下: module.exports = { // 选项... } publicPath 部署应用包时的基本 URL.例如 https://www.my-app.com/,则publicPath则为

  • vue-cli脚手架config目录下index.js配置文件的方法

    此文章介绍vue-cli脚手架config目录下index.js配置文件 1.此配置文件是用来定义开发环境和生产环境中所需要的参数 2.关于注释 当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看 3.上代码 // see http://vuejs-templates.github.io/webpack for documentation. // path是node.js的路径模块,用来处理路径统一的问题 var path = require('path')

  • vue中的config目录下index.js解读

    目录 vue的config目录下index.js config中的 index.js配置项 总结 vue的config目录下index.js 'use strict' // Template version: 1.3.1 // see http://vuejs-templates.github.io/webpack for documentation. // 用于处理路径统一的问题 const path = require('path') module.exports = { // 开发环境的配

  • 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

  • vue完成项目后,打包成静态文件的方法

    vue完成项目后,如何打包成静态文件,并且用Node调试 打包 1.修改config里面的index.js里面的productionSourceMap为false,默认情况是true(true代表打包环境是开发环境,可以进行调试:false表示生产环境,正式上线的) 2.在cmd里面运行npm run build,(运行的是build里面的build.js文件) 生成的包放在dist下面 使用node进行调试 1.在根目录下创建prod.server.js文件,这个文件的作用是作为一个小的htt

  • 解决vue打包项目后刷新404的问题

    vue打包项目后刷新404的问题Nginx配置 server { listen 80; server_name localhost; index index.html; root /root/dist; location / { root /root/dist; try_files $uri $uri/ /index.html =404; } } 以上这篇解决vue打包项目后刷新404的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vu

  • vue@cli3项目模板怎么使用public目录下的静态文件

    作为图片最好放在static目录下,但是vue@cli3没有static,网上都说放在public目录下,行,那就放吧,可问题是图片放了怎么使用 第一次尝试 肯定用绝对路径这就不说了,用相对路径,webpack会解析成base64,可是绝对路径怎么输都不对,咋回事 后面看网上说把前面路径下的public路径去掉,好,开发环境没问题了,可打包报错怎么办,就这个我研究了好久. 解决问题 网上一大堆牛头不对马嘴的,我也是无语了 最后的最后,终于官网找到了完美的解决方案 如此设置,完美解决问题,如果你留

  • 项目打包成jar后包无法读取src/main/resources下文件的解决

    项目打包成jar后包无法读取src/main/resources下文件的解决

    目录 一.项目场景 二.问题描述 发现问题 分析问题 为什么使用 ClassPathResource 后, 可以找到打包后的文件路径? 三.解决方案 方案一 方案二 意外出现 总结 一.项目场景 在项目中读取文件时, 使用new File() 出现的一个坑以及解决流程这种问题不仅在本地文件读取时会遇到, 而且在下载项目下 (例如: src/main/resources目录下) 的文本时, 也会遇到, 二.问题描述 发现问题 原来代码该代码功能是利用 common.io 包下的FileUtils来

  • idea发布web项目后Tomcat服务器找不到该项目的问题及解决方法

    概述 项目创建成功,项目部署也成功了,但Tomcat服务器找不到该项目,如下图 第二种情况:当你修改了项目的名字,你也需要按照第一种情况重新部署项目. 项目发布失败,可以去该项目的编译输出路径out下查看Artifacts目录下看看是否有该项目 左击file,找到project Setting,左击Artifacts,点加号,点Web Application:Exploded ,再点From Modules- ,选择要选的项目,点击ok! 当上述步骤完成后,再去重新部署项目 到此这篇关于idea

  • 防止SpringMVC拦截器拦截js等静态资源文件的解决方法

    SpringMVC提供<mvc:resources>来设置静态资源,但是增加该设置如果采用通配符的方式增加拦截器的话仍然会被拦截器拦截,可采用如下方案进行解决: 方案一.拦截器中增加针对静态资源不进行过滤(涉及spring-mvc.xml) <mvc:resources location="/" mapping="/**/*.js"/> <mvc:resources location="/" mapping=&quo

  • Tomcat无法加载css和js等静态资源文件的解决思路

    解决思路有两个 一是,你使用了Apache服务器,html不交给Tomcat处理,所以你找不到Html等静态资源,所以你先停掉阿帕奇,然后只用Tomcat猫试试. 二是,像我一样,使用了Jetty开发程序,但是打war包的时候忘记干掉web.xml中的jetty修改静态资源的代码.如下,干掉即可. 复制代码 代码如下: <servlet> <servlet-name>default</servlet-name> <!-- <servlet-class>

  • 详解Vue用cmd创建项目

    Vue是当下很流行的前端框架,现在我来分享一下用Vue创建项目的流程 1.新建一个文件夹,用来创建Vue项目. 2.进入到该文件夹,在地址栏内写'cmd',回车.就会弹出命令行窗口 3.进入正式cmd操作,创建个vue项目,命令行操作指令:vue init webpack project, project是你创建的文件夹名. 4.cd  project,进入文件夹 5.安装依赖:npm install 等待即可,因为服务器在国外,所以要慢.完成后如下图 6.现在已经创建好了,那就让项目先运行一下

  • Vue UI创建项目详细步骤

    Vue UI创建项目详细步骤

    1.首先要安装最新的Vue CLI 在命令行工具里输入一下命令 npm install -g @vue/cli 或者 yarn global add @vue/cli 安装成功后,可用vue -V命令查看已安装的Vue CLI版本 2.在命令行运行 vue ui,就会出现图形化管理 在界面上可以看到第一个tab项目,点击创建这个tab ,可以来创建一个新的vue项目 3.点击了创建之后可以看到一下内容,可以项目创建一个目录或者选择一个目录,然后选择一种包管理工具:可以使npm,也可以是yarn等

随机推荐