在用npm run build 打包的时候，正常img标签中的src图片路径和css中的图片路径是可以正常识别的，但是在打包js获取的图片路径时，打包后无法找到图片，原因是js动态生成的路径无法被url-loader解析到，如果你去build，会发现图片甚至不会打包输出到dist目录（webpack是按需打包的）。如果你是vue-cli初始化的项目，解决的办法：第一步，把图片放到src同级的static目录（build/build.js文件中有一段代码是把static目录拷贝到dist/st...
首先，需要使用webpack的插件CleanWebpackPlugin，安装命令如下： npm install --save-dev clean-webpack-plugin 其次，需要在生产环境提供的文件：build/webpack.prod.conf.js的plugins节点下添加如下代码： new CleanWebpackPlugin( [‘dist‘], //匹配删除的文件 { root：path.resolve(__dirname,‘../‘) //根目录 verbose：true， //是否启用控制台输...
新版本webpack生成的dev.server.js 在webpack.dev.conf.js中webpack.dev.conf.jsconst axios = require(‘axios‘) const express = require(‘express‘) const app = express() const apiRoutes = express.Router() app.use(‘/api‘, apiRoutes)然后找到devserver 这里可以配置路由devServer: {before (app) {app.get(‘/api/getDiscList‘, function (req, res) {res.json})}, 原文：https://www.cnblogs.com/luxiaoyao/p/8733...
总体框架一个vue-cli的项目结构如下，其中src文件夹是需要掌握的，所以本文也重点讲解其中的文件，至于其他相关文件，了解一下即可。文件结构细分1.build——[webpack配置]build文件主要是webpack的配置，主要启动文件是dev-server.js，当我们输入npm run dev首先启动的就是dev-server.js，它会去检查node及npm版本，加载配置文件，启动服务。2.config——[vue项目配置]config文件主要是项目相关配置，我们常用的就是当端口冲突时配...
工欲善其事必先利其器,安装所需环境node和npm的安装 首先需要安装node环境，直接到官网下载安装包 https://nodejs.org/zh-cn/ 安装node默认安装npm， 不需要重复安装npm。安装完成后，可以命令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功。下载dev-tool工具 为了以后调式做准备 https://github.com/vuejs/vue-devtools#vue-devtools安装全局vue-cli脚手架 npm install -g vue-cli 出现如下问题： npm ins...
在开始写webpack.base.conf.js（简称base）之前，我们先来看一下vue-loader.conf.js这个文件，毕竟在base中我们还会用到：‘use strict‘//引入前一篇文章的utils文件 const utils = require(‘./utils‘) //引入config文件 const config = require(‘../config‘) //判断当前是否为生产环境，如果是则返回true const isProduction = process.env.NODE_ENV === ‘production‘ //是否使用sourceMap，如果是生产环境就使用config文件...
使用Vue-cli 脚手架生成的项目使用Vetur+ Prettier + ESlint的配置设置代码规范和格式先安装插件.Vetur+ Prettier + ESlint1、ESlint设置 文件.eslintrc.js中的配置 1 module.exports = {2 root: true,3 env: {4 node: true 5 },6‘extends‘: [7‘plugin:vue/essential‘,8‘eslint:recommended‘ 9 ], 10 parserOptions: { 11 parser: ‘babel-eslint‘12 }, 13 rules: { 14‘no-console‘: process.env.NO...
文件压缩如何去掉console在使用vue开发项目的过程中，免不了在调试的时候会写许多console，在控制台进行调试；在开发的时候这种输出是必须的，但是build后线上运行时这个东西是不能出现的；那么我如何配置项目，从而让webpack帮我删除掉console呢？下面我们给出了vue-cli 3.0和vue-cli 2.0的配置如下：vue-cli 3.0在 vue.config.js文件中添加如下代码即可const UglifyJsPlugin = require('uglifyjs-webpack-plugin');module.export...
整了两天才发现是前段时间创建修改HOSTS文件导致的找到目录C:\Windows\System32\drivers\etc 删除 HOSTS文件注意：删除的不是hosts.ics 删除的是HOSTS原文：https://www.cnblogs.com/ITwj-115/p/14775816.html
使用vue.js开发一个音乐播放平台，兼容手机端目的是联系vue和记录下开发过程之前已经安装好node.js只需要使用它的包管理工具npm 安装webpack打包工具和vue-cli脚手架安装webpack npm install webpack -g 安装vue-cli npm install --global vue-cli 这时候webpack和vue-cli都安装好了，可以初始化工程了vue init webpack music ├── public // 项目公共文件夹│ └── favicon.ico ...
1、config/index.jsvar path = require(‘path‘)module.exports = {build: { // production 环境env: require(‘./prod.env‘), // 使用 config/prod.env.js 中定义的编译环境index: path.resolve(__dirname, ‘../dist/index.html‘), // 编译输入的 index.html 文件assetsRoot: path.resolve(__dirname, ‘../dist‘), // 编译输出的静态资源路径assetsSubDirectory: ‘static‘, // 编译输出的二级目录assetsPublicPath: ‘/‘...
项目地址：https://github.com/caochangkui/vue-cli3项目代码：城市列表首页：City.vue<template><div id="city"><!-- <img src="/logo.png" alt="" height="10px"> --><div class="word" v-show="showWord"><span>{{letter}}</span></div><div class="title">城市选择</div><city-list:cities="cities":hot="hotCities":letter="letter"></city-list><city-alphabet:cities="cities"@change="handleLetterChange"></city-alphabet...
参考：https://cli.vuejs.org/zh/guide/本文只记录Vue CLI里关于npm的一些使用（vue-cli 3.x）一、基础Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。1、安装@vue/cli：npm install -g @vue/cli安装之后，你就可以在命令行中访问 vue 命令。...
1、修改build文件夹下的utils.js文件 在options.extract的逻辑里面增加 publicPath: ‘../../‘ ，防止处理打包后找不到静态文件2、修改config文件夹下的index.js 修改assetsPublicPath:‘./‘ ,防止js文件找不到3、在vue项目根目录，运行npm run build，会在项目根目录的生成dist文件夹（后面nginx直接访问文件夹）4、配置nginx反向代理，修改nginx .conf文件，增加以下配置（window为例） server { listen 808...
参考： https://blog.csdn.net/Liu_yunzhao/article/details/90520028 概念 同源策略 同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。 可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。 所谓同源是指：协议、域名、端口都相同。 跨域 跨域就是不同源，就是不满足协议、域名、端口都相同的约定。...