创建 vue.config.js 文件const path = require(‘path‘)const resolve = dir => path.join(__dirname, dir)module.exports = {publicPath: process.env.NODE_ENV === ‘production‘ ? ‘/‘ : ‘/‘,// 打包输出outputDir: "dist",// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录assetsDir: ‘assets‘,// eslint-loader 是否在保存的时候检查lintOnSave: process.env.NODE_ENV !== ‘production‘,...
在开始写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文件...
当我们需要和后台分离部署的时候，必须配置config/index.js:用vue-cli 自动构建的目录里面 （环境变量及其基本变量的配置）var path = require(‘path‘)module.exports = {build: {index: path.resolve(__dirname, ‘dist/index.html‘),assetsRoot: path.resolve(__dirname, ‘dist‘),assetsSubDirectory: ‘static‘,assetsPublicPath: ‘/‘,productionSourceMap: true},dev: {port: 8080,proxyTable: {}}
}在‘build‘部分，...
问题描述：前端需要修改restful API的url，但是打包之后，配置文件找不到了，如果在npm run build 生成dist后，这个配置也被写死了，传到运行的前端服务器上后，假设某次，api服务器的ip修改了，改动只是更新下这个url，但是却需要会到前端源码，url后，在重新npm run build,然后再把整个dist再重新传到前端服务器，才可以。解决方法：用了generate-asset-webpack-plugin 这个插件，在webpack.prod.conf.js中去生成configServer.js...
使用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...
第一步： 在当前项目终端下输入：npm install vue-router --save第二大步： 第三步： 在main.js中注册路由 第四步： 写要跳转的路径在App.vue中添加对应标签 进行跳转 原文：https://www.cnblogs.com/ayong6/p/12245354.html
配置webpacknpm i init --y
npm i webpack -D
npm i webpack-cli -D
npm i @types/firefox-webext-browser @types/chrome -D // 浏览器扩展API提示
支持 Typescripttsc --init
npm i typescript ts-loader -D
设置tsconfig.json配置文件{"compilerOptions": {"target": "ES2016","module": "commonjs", // ts-node 不支持 commonjs 以外的任何模块语法"allowJs": true,"outDir": "./dist","rootDir": "./src","strict": true,"...
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: ‘/‘...
在vscode中使用 ctrl+shift+p 打开一个选项窗口，然后找到配置用户代码片段，点击进去，输入vue.json找到对应的配置文件点击进去，然后粘贴下面配置替换即可。{// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:// $1, $2...
1.创建环境env文件文件说明备注.envvue-cli-service build 时 , 默认的配置默认的 npm run build = vue-cli-service build.env.developmentvue-cli-service serve 时 ,默认的配置默认的 npm run serve = vue-cli-service serve.env.{mode}下文以mode = dev为例 .env文件中变量命名 必须以 VUE_APP_ 开头例子(.env.dev) :VUE_APP_DATA_TEST=TRUE
VUE_APP_REQUEST_URL=‘/api‘
VUE_APP_REQUEST_DEMO=‘http://172.18.0.95:8073‘...
使用方法component:resolve => require([‘@/pages/About‘],resolve) //"@"相当于".."
懒加载router/index.jsimport Vue from‘vue‘
import Router from‘vue-router‘
Vue.use(Router)export defaultnew Router({mode:‘history‘,routes: [{path:‘/‘,redirect:‘/index‘},{path: ‘/about‘,name: ‘About‘,component:resolve => require([‘@/pages/About‘],resolve)},{path: ‘/index‘,name: ‘Index‘,componen...
参考： https://blog.csdn.net/Liu_yunzhao/article/details/90520028 概念 同源策略 同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。 可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。 所谓同源是指：协议、域名、端口都相同。 跨域 跨域就是不同源，就是不满足协议、域名、端口都相同的约定。...
一：工程安装less、less-loader配置版本如下： "devDependencies": {"less": "^3.0.4","less-loader": "^5.0.0",/**其它配置*/
} 二：在main.js中引入vant的less文件import ‘vant/lib/index.less‘三：创建自定义主题变量文件less如下比如，resetui.less:@blue: #2897ff;四：修改配置文件中的utils.js代码原代码：return {css: generateLoaders(),postcss: generateLoaders(),less: generateLoaders(‘less‘),sass: generateL...
前提：在开发环境下，axios.defaults.baseURL = ‘‘， 即不设置axios的前缀 ！方法一： 这个是接口在开发环境中的接口形式，以/api 形式开头。然后vue.config.js 配置如下module.exports = {publicPath: ‘‘, // 为空，则项目可放在服务器任何位置outputDir: "../teamemory", //打包后的文件夹名字及路径devServer: { // 开发环境跨域情况的代理配置 proxy: {‘/api‘: {target: ‘https://inter.taotiangou.net‘}}}
...
这次给大家带来vue-cli组件配置与使用，vue-cli组件配置与使用的注意事项有哪些，下面就是实战案例，一起来看一下。
