vue dplayer 加载失败_最新vue脚手架项目搭建,并解决一些折腾人的问题
话不多说,跟好lz的操作!!!
2020/8/1
第一步:
~~~~质问三连:
~~~~~~~~1.node.js安装了吗?:ht
tp://nodejs.cn/download/
~~~~~~~~2.vue安装了吗?:打开cmd,全局安装,使用npm install vue -g --save
~~~~~~~~3.vuecli(vue脚手架)安装了吗?:打开cmd,全局安装,使用npm install -g @vue/cli,用vue -V查看版本(注意:后面的V是大写!!!)
第二步:
~~~~开始搭建项目:
~~~~~~~~1.打开cmd,使用vue ui,这时会打开搭建vue脚手架项目的网页
~~~~~~~~2.你一看,就知道怎么创建了,选一个路径,放你要创建的项目的项目文件夹,创建
~~~~~~~~3.输入你项目文件夹的名字。包管理器,就npm。下一步
~~~~~~~~4.手动。下一步
~~~~~~~~5.害怕少选,选错?如果担心搞错的话,最好都选上
~~~~~~~~6.左边两个都选上。右边选ESLint + Prettier,或者ESLint +Standard config
~~~~~~~~7.创建项目。弹出个框,可写可不写。创建项目
~~~~~~~~8.打开你刚刚输入vue ui的那个cmd,你看见正在加载,等它加载完之后项目就创建好了。
~~~~~~~~9.还没结束,我们还要添加一些文件
第三步:
~~~~打开你的项目文件夹的根目录,你会看到根目录里面有public文件夹,src文件夹等各种东西
~~~~然后就在你的项目文件夹的根目录下创建一个 vue.config.js 文件
~~~~在这个文件中写入以下内容,保存:
module.exports = { /** 区分打包环境与开发环境 * process.env.NODE_ENV==='production' (打包环境) * process.env.NODE_ENV==='development' (开发环境) * baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/', */ // 项目部署的基础路径 // 我们默认假设你的应用将会部署在域名的根部, // 例如 https://www.my-app.com/ // 如果你的应用部署在一个子路径下,那么你需要在这里 // 指定子路径。比如将你的应用部署在 // https://www.foobar.com/my-app/ // 那么将这个值改为 '/my-app/' publicPath: "./", // 构建好的文件输出到哪里 outputDir: "./dist", // where to put static assets (js/css/img/font/...) // 是否在保存时使用‘eslint-loader’进行检查 // 有效值: true | false | 'error' // 当设置为‘error’时,检查出的错误会触发编译失败 lintOnSave: true, // 使用带有浏览器内编译器的完整构建版本 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only runtimeCompiler: true, // babel-loader默认会跳过`node_modules`依赖. // 通过这个选项可以显示转译一个依赖 transpileDependencies: [ /* string or regex */ ], // 是否为生产环境构建生成sourceMap? productionSourceMap: false, // 调整内部的webpack配置. // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md chainWebpack: () => {}, configureWebpack: () => {}, // CSS 相关选项 css: { // 将组件内部的css提取到一个单独的css文件(只用在生产环境) // 也可以是传递给 extract-text-webpack-plugin 的选项对象 extract: true, // 允许生成 CSS source maps? sourceMap: false, // pass custom options to pre-processor loaders. e.g. to pass options to // sass-loader, use { sass: { ... } } loaderOptions: {}, // Enable CSS modules for all css / pre-processor files. // This option does not affect *.vue 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, // PWA 插件相关配置 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa pwa: {}, // configure webpack-dev-server behavior devServer: { open: process.platform === "darwin", disableHostCheck: false, host: "0.0.0.0", port: 8088, https: false, hotOnly: false, // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy // proxy: { // '/api': { // // 此处的写法,目的是为了 将 /api 替换成 https://www.baidu.com/ // target: 'https://www.baidu.com/', // // 允许跨域 // changeOrigin: true, // ws: true, // pathRewrite: { // '^/api': '' // } // } // } // string | Object // before: app => {} }, // 第三方插件配置 pluginOptions: { // ... }};
~~~~这个 vue.config.js 文件在脚手架2.x版本的时候是一个config文件夹,里面有几个文件
|-config
|—dev.env.js
|—index.js
|—prod.env.js
~~~~现在统一写在 vue.config.js 中
~~~~可以看到,vue.config.js 中有一个proxy对象,这个是为以后的网络请求而生的
这篇文章到这里就结束了,是不是感觉很方便呢?希望对您有所帮助
vue dplayer 加载失败_最新vue脚手架项目搭建,并解决一些折腾人的问题相关推荐
- initpki.dll加载失败 找不到指定的模块的解决办法
有用户在更新Win10系统时,收到提示"模块'initpki.dll'加载失败.请确保该二进制存储在指定的路径中,或者调试它以检查该二进制或相关的DLL文件是否有问题.找不到指定的程序.&q ...
- iframe js 加载失败_如何提高Vue项目首页的加载速度
为何当一个VUE项目过大时,打包之后初次访问首页加载速度会异常的缓慢,是什么原因导致以及如何解决这些问题? 首页打开速度慢的原因 其实浏览器加载一个页面的过程就是通过http协议从服务器端下载项目所需 ...
- vue图片加载失败使用默认图片,el-image支持懒加载,自定义占位、加载失败等
<template><d2-container><h3>image加载失败使用默认图片</h3><img src=""alt= ...
- htmlimg图片加载失败_动态加载图片失败的默认图显示
经常碰到这类场景,动态加载图片时,因为一些原因(图片链接不存在啊,图片误删啊,图片路径不对或图片路径为空等等)导致真实图片显示不出来.那么为了提高用户体验,都会显示一个默认图. 动态加载图片失败时,显 ...
- android tbs 内核加载失败_腾讯TBS初始化失败,加载失败问题(踩坑记录 64位手机无法加载x5)...
问题一:ndk配置的问题 //X5兼容64位手机 ndk { abiFilters "armeabi", "armeabi-v7a", "x86&qu ...
- 模块d3d12.dll加载失败_语音控制模块
说道作品的互动性,有什么能比语音控制更加炫酷呢? 今天介绍一款免编程非特定人声, 串口 语音识别模块LD3320 接线图: 调试:TXD/RXD通过串口模块连接电脑,将麦克风连接模块.打开上位机串口调 ...
- element ui 图片加载失败_解决Element UI - el-image 图片初始化加载失败问题
最近使用elementUI的el-image发现经常会出现加载src失败的情况,问题估计就是e-image的src路径一旦初始化加载失败的话就没有异步刷新,(这个地方需要注意过这个问题的大佬解读下源码 ...
- PC端网易云音乐播放云盘音乐时显示加载失败,自动调转下一首的解决方法
PC端网易云音乐播放云盘音乐时显示加载失败,自动调转下一首解决方法 注意: 一定要看看是不是和你的情况一样,不一样不要用这种方法!!! 具体情况: 我们经常会下载歌曲存到电脑文件夹里,然后通过网易云音 ...
- vue 判断页面加载完成_在Vue+webpack中详细讲解基础配置
这篇文章主要介绍了Vue+webpack项目基础配置教程,需要的朋友可以参考下. 最近在学习webpack,跟着课程一个单页面应用,在这里记录一下. 这个部分主要讲了如何配置webpack的环境,以及 ...
最新文章
- Android输入法遮挡了输入框,使用android:fitsSystemWindows=“true“后界面顶部出现白条解决方案
- LayIM.AspNetCore Middleware 开发日记(一)闲言碎语
- 浏览器开发人员工具使用初步图解
- 【Mysql】_1在centos7虚拟机上完成Mysql环境部署
- android byteBuffer的使用
- mysql 为数据表添加字段_MySQL数据表添加字段实例
- 竹间智能B轮3000万美元融资,打造业内领先的对话机器人及多模态情感计算平台...
- staticmethod自己定制
- Codeforces 855G Harry Vs Voldemort 边双连通分量+并查集
- LTE网络有关系统消息(MIB/SIB)深度解析
- MAC 在线安装系统
- 手把手教会你使用机器学习拥有YOLOV5自己的图像识别
- Java抽取Office、PDF的四件兵器
- 一英寸芯片大小_芯片特征尺寸背后的秘密是什么
- 观察者模式解读厦门建国以来最强台风
- 对付短信骗子的方法(恶搞)
- ipv6协议与网络服务器有关,IPv6与IPv4协议网络中的双工通信差异
- 计算机专业3.6的绩点是什么水平,绩点3.5算什么水平
- 每日新闻:中国移动OPhone手机下周全面亮相(8月28日)
- 盘点最高调薪行业 年薪过万要几年
热门文章
- 关于printf()与自增自减运算符结和问题
- go 开了多少个goroutine 怎么看_线上 Go 程序偶尔出现异常怎么办?这个思路可解决你的烦恼...
- 2018百度之星度度熊学队列
- mysql事务隔离级别与锁_mysql事务隔离级别与锁
- STM32 之八 在线升级(IAP)超详细图解 及 需要注意的问题解决
- 操作系统原理:操作系统的启动 中断/异常/系统调用
- OS / linux 内核 read 操作源代码分析
- Ubuntu20.04 安装VMware Tools
- android 自定义dialog iphone,Android用DialogFragment实现iphone样式的圆角对话框 – 思,无邪...
- 计算机网络安全六要素,六要素教学在计算机网络教学中的探索与反思