在使用vue开发项目时，如果要使用其单文件组件特性，必然要使用webpack或者其他打包工具打包，这里我用到的是webpack打包，首先是搭建vue环境和webpack环境，在这里遇到的一个问题是在成功搭建了vue环境之后，webpack环境基本上也搭好了，但是打包的时候，一直没有生成对应的dist文件夹，因为首次打包带的时候用的是npm run dev，所以在文件夹中并没有生成dist文件夹，因为run dev走的是dev-server.js，会启动webpack-dev-server，相应的代码会读进内存，不会在当前目录下产生dist文件夹。

所以首次打包的话想要生成dist文件夹，要使用webpack即可。

vue结合webpack打包问题的更多相关文章

  1. vue和webpack打包 项目相对路径修改

    一般vue使用webpack打包是整个工程的根目录,但是很多情况下都是把vue打包后的文件在某子目录下. 修改: 1,打开index.js assetsPublicPath:'/' 改为: asset ...

  2. vue之webpack打包工具的使用

    vue之webpack打包工具的使用 一.什么是webpack? webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个 ...

  3. vue 使用webpack打包后路径报错以及 alias 的使用

    一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...

  4. vue通过webpack打包后怎么运行

    1. 成功使用webpack打包完成后会默认得到dist的文件夹 2. dist文件夹中有html与其他的静态文件 3. 在dist文件夹中打开命令窗口或者git,开一个服务器(像anywhere) ...

  5. vue项目 webpack打包后，图片路径是绝对路径

    vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...

  6. vue的webpack打包

    一个完整的项目离不开 开发环境 生产环境 测试环境 这三个环境 首先解释一下这三个环境的含义 开发环境:开发环境是程序猿们专门用于开发的服务器,配置可以比较随意,为了开发调试方便,一般打开全部错误报告 ...

  7. vue项目webpack打包后修改配置文件

    从webpack打包结构中我们知道,vue中有一个存放外部资源的文件夹static,它里面的文件是不会被打包编译的,所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js ...

  8. 10. vue之webpack打包详解

    一.什么是webpack webpack官网给出的定义是 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应 ...

  9. vue 之webpack打包工具的使用

    一.什么是webpack? webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个.vue文件中都可能html.js.c ...

随机推荐

  1. C++多线程之互斥锁和超时锁

    #include<iostream> #include<thread> #include<mutex> using namespace std; mutex mu; ...

  2. gin中提供静态文件服务

    package main import ( "github.com/gin-gonic/gin" "net/http" ) func main() { // 静 ...

  3. 使用Termux并与ubuntu建立ssh连接

    什么是Termux? Termux是一个Android终端仿真器和Linux环境应用程序,直接工作,无需根目录或设置.一个最小的基本系统被自动安装-额外的软件包可以使用APT软件包管理器来使用.不需要 ...

  4. Java安全之BCEL ClassLoader

    目录 Java安全之BCEL ClassLoader 写在前面 About BCEL 调试分析 食用姿势 Fuzz反序列化Gadget Fastjson BCEL Payload Thymeleaf ...

  5. js-reduce方法源码

    // 数组中的reduce方法源码复写 //先说明一下reduce原理:总的一句,reduce方法主要是把数组遍历, //然后把数组的每个元素传入回调函数中,回调函数怎么处理,就会的到什么样的效果 A ...

  6. [论文][半监督语义分割]Adversarial Learning for Semi-Supervised Semantic Segmentation

    Adversarial Learning for Semi-Supervised Semantic Segmentation 论文原文 摘要 创新点:我们提出了一种使用对抗网络进行半监督语义分割的方法 ...

  7. bom-scroll

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. listview界面显示

    1.布局写listview      2.找到listview           3.封装新闻数据到list集合中 ,目的是为adapter提供数据展示.     4.封装一个Adapter类继承B ...

  9. 简单仿京东"筛选"界面 双导航栏控制器共存 by Nicky.Tsui

    大概就是这么一个效果 如图.大概可以看到,"筛选"视图后面有一层视图盖住了后面原来的视图 那么我们可以通过加一个view到导航栏控制器的view里面来实现 //该view作为全局变 ...

  10. 手动加载nacos自定义配置到全局变量中

    由于springboot启动顺序:先加载上下文再加载bean 开始日常搬砖: 1.通过启动日志发现nacos在PropertySourceBootstrapConfiguration中加载上下文配置: ...