vue.config.js的常用配置
const path = require('path')
const glob = require('glob')
const resolve = (dir) => path.join(__dirname, dir)
const PAGES_PATH = './src/pages/*/*.js' module.exports = {
// publicPath: '/test/', // 设置部署应用包时的基本URL
publicPath: process.env.NODE_ENV === 'production' ? '/test/' : './', // 开发环境与生产环境的区分
//outputDir: 'testbuild', // 运行build 时生产的构建文件的目录,默认'dist'
// assetsDir: 'assets', // build之后生成的静态资源放置的目录,默认''
// indexPath: 'test/home.html', // build之后生成的index.html的路径
// filenameHashing: true, // build之后生成的静态资源默认情况下加了hash值以控制静态资源的缓存,默认是true
// pages: {
// index:{
// entry: 'src/pages/index/main.js', // page入口
// template: 'public/index.html', // public 里面的文件
// filename: 'index.html', // build之后生成的文件及路径名
// title: 'Index Page',
// chunks: ['chunk-vendors', 'chunk-common', 'index']
// },
// page1:{
// entry: 'src/pages/page1/main.js', // page入口
// template: 'public/page1.html', // public里面的文件
// filename: 'page1.html', // build之后生成的文件及路径名
// title: 'page1', // 使用此项时,// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
// chunks: ['chunk-vendors', 'chunk-common', 'page1'] // 提取出来的通用 chunk 和 vendor chunk
// },
// page2:{
// entry: 'src/pages/page2/main.js', // page入口
// template: 'public/page2.html',
// filename: 'page2.html', // build之后生成的文件及路径名
// title: 'Index Page',
// chunks: ['chunk-vendors', 'chunk-common', 'page2']
// }
// },
pages:setPages(),
productionSourceMap: false, // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建
// devServer: {
// port: '1111',
// // proxy: 'http://localhost:8080' //告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:8080。
// proxy: {
// '/api': {
// //要访问的跨域的域名
// target: 'http://localhost:8080',
// ws: true, // 是否启用websockets
// secure:false, // 使用的是http协议则设置为false,https协议则设置为true
// changOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样客户端端和服务端进行数据的交互就不会有跨域问题
// pathRewrite: {
// '^/api': ''
// }
// }
// }
// },
chainWebpack: config => {
/* 自动导入公共文件*/
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(
type => addStyleResource(config.module.rule('scss').oneOf(type))
) /* 添加别名*/
config.resolve.alias
.set('@title', resolve ('src/assets/commonPublic/title.vue'))
}
} /**
* 注入公共样式
* @param rule
*/
function addStyleResource (rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, 'src/assets/common.scss') // resolve()返回绝对路径
]
})
} /**
* 多页面跳转
*/
function setPages () {
let pages = {}
glob.sync(PAGES_PATH).forEach(filepath => {
let fileList = filepath.split('/')
let fileName = fileList[fileList.length - 2] pages[fileName] = {
entry: filepath,
template:`public/${fileName}.html` , // 'public/index.html'
filename: `${fileName}.html`,
// title:
chunks: ['chunk-vendors', 'chunk-common', fileName]
}
})
return pages
}
对应生成的dist文件目录及多页面配置时的文件目录如下:
vue.config.js的常用配置的更多相关文章
- 关于vue.config.js 的 proxy 配置
关于vue.config.js 的 proxy 配置有的同学不怎么明白项目里面有的配置了 pathRewrite 地址重写,有的又没有进行配置?/* * proxy代理配置的说明 * *接口例子:/z ...
- vue-cli 3.x搭建项目以及其中vue.config.js文件的配置
参考链接:https://www.cnblogs.com/wxh0929/p/11271551.html vue-cli3全面配置详解:https://www.jb51.net/article/150 ...
- 关于 vue.config.js 文件的配置
相关文档: https://cli.vuejs.org/zh/config/#vue-config-js
- vue.config.js常用配置
使用vue-cli3.0搭建项目比之前更简洁,没有了build和config文件夹. vue-cli3的一些服务配置都迁移到CLI Service里面了,对于一些基础配置和一些扩展配置需要在根目录新建 ...
- Vue项目搭建常用的配置文件,request.js和vue.config.js
request.js用来请求数据,封装的代码如下: import axios from 'axios' const request = axios.create({ timeout: 5000 }) ...
- webpack.config.js和vue.config.js的区别
webpack.config.js是webpack的配置文件,所有使用webpack作为打包工具的项目都可以使用,vue的项目可以使用,react的项目也可以使用. vue.config.js是vue ...
- Vue Cli 3:vue.config.js配置文件
Vue Cli 3生成的项目结构,没有build.config目录,而是使用vue.config.js来进行配置. vue.config.js 是一个可选的配置文件,如果项目的 (和 package. ...
- vue3.0 vue.config.js 配置实战
今天讲述一下vue-config.js配置,我们前面搭建好脚手架会发现,这个对比2.x版本少了很多东西,没有build的配置,也没有webpack的配置,那么问题来了,我们如何去开发我们的项目呢,比如 ...
- vue cli3.3 以上版本配置vue.config.js
// vue.config.js 配置说明//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions// 这里只 ...
随机推荐
- Java方法的可变参数
class Demo { public static int sum(int ... data) { //此处可以传递一个数组,也可以是多个参数 int sum = 0; for (int i : d ...
- Win10无法安装.NET Framework3.5的解决办法
诸位网友如果工作中使用WIN10遇到如图的这种问题,现将解决办法整理如下: 一.第一步就是修复系统:按“Windows+X”点击“Windows PowerShell(管理员)&命令提示符(管 ...
- 关于使用Java Mail发邮件的问题
今天做东西的时候突然遇到需要发邮件的问题,然后就使用SMTP协议进行邮件的发送.用了一个工具类简化邮件发送的功能, 在这次试验中,我使用了自己的QQ邮箱进行发送邮件的发送者. public class ...
- 一文了解Nuget的使用
Nuget介绍 官网定义:NuGet是.NET的软件包管理器(免费).NuGet客户端工具提供了生成和使用软件包的能力.NuGet Gallery 是所有软件包作者和消费者都使用的中央软件包存储库. ...
- MySQL必知必会(通配符过滤Like,%,_)
SELECT prod_id, prod_name FROM products WHERE prod_name LIKE 'jet%'; #百分号(%)表示任何字符出现任意次数, %不能匹配值为NUL ...
- luogu P1379 八数码难题
题目描述 在3×3的棋盘上,摆有八个棋子,每个棋子上标有1至8的某一数字.棋盘中留有一个空格,空格用0来表示.空格周围的棋子可以移到空格中.要求解的问题是:给出一种初始布局(初始状态)和目标布局(为了 ...
- 关于<form> autocomplete 属性
基本知识 值 描述 on 默认.规定启用自动完成功能. off 规定禁用自动完成功能. autocomplete 属性规定表单是否应该启用自动完成功能. 自动完成允许浏览器预测对字段的输入.当用户在字 ...
- Cannot forward after response has been committed问题的解决
Cannot forward after response has been committed问题解决及分析 通过TOMCAT把系统启动,可以正常登陆门户,登陆进去选择子系统的时候点击登陆的时候,可 ...
- Coderforces-455A
Alex doesn't like boredom. That's why whenever he gets bored, he comes up with games. One long winte ...
- 初次在Vue项目使用TypeScript,需要做什么
前言 总所周知,Vue新版本3.0 使用 TypeScript 开发,让本来就很火的 TypeScript 受到更多人的关注.虽然 TypeScript 在近几年才火,但其实它诞生于2012年10月, ...