配置vue.config.js
配置全局sass变量
module.exports = {
// 全局配置css文件
css: {
loaderOptions: {
sass: {
prependData: `
@import "@/css/common.scss";
`
}
}
},
}
但是这里有个坑,sass-loader 新版和旧版写法不一样
// 旧
data: `@import "~@/assets/scss/common.scss";`
// 新
prependData: `@import "~@/assets/scss/common.scss";`
关掉烦人的eslint错误检测
vue.config.js中添加
lintOnSave:false,
html中插入环境变量
可以分别加载开发环境和生产环境的变量
自定义生成的静态资源的路径
assetsDir:'./static',
代理配置
devServer: {
open: true, //npm run serve时自动打开页面
proxy: {
'/api': {
target: 'http://api.home.cc',
// 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
changeOrigin: true,
ws: true,
pathRewrite: {
// 替换target中的请求地址,也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api即可
'^/api': '/'
}
},
},
},
模拟数据
//json数据
const mock = require('./data/mock.json');
devServer: {
proxy: {},
before(app) {
// 定义接口
app.get("/api/mockData", (req, res) => {
res.json(mock);
});
app.get("/api/main", (req, res) => {
res.json(1);
});
},
},
配置
const mock = require('./data/mock.json');
module.exports = {
publicPath: './', // 基本路径
outputDir: 'dist', // 输出文件目录
lintOnSave:false, // eslint-loader 是否在保存的时候检查
productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
assetsDir:'./static', //静态资源生成目录
// 全局配置css文件
css: {
loaderOptions: {
sass: {
prependData: `
@import "@/css/common.scss";
`
}
}
},
devServer: {
open: true,
proxy: {
'/api': {
target: 'http://api.crmhome.cc',
// 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
changeOrigin: true,
ws: true,
pathRewrite: {
// 替换target中的请求地址,也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api即可
'^/api': '/'
}
},
},
before(app) {
app.get("/api/mockData", (req, res) => {
res.json(mock);
});
app.get("/api/main", (req, res) => {
res.json(1);
});
},
},
// vue路由按需加载 去除插件
chainWebpack(config) {
config.plugins.delete('preload')
config.plugins.delete('prefetch')
},
configureWebpack: config => {
config.plugins.push(
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery"
})
)
// 开发环境不需要gzip
if (process.env.NODE_ENV === 'production'){
config.plugins.push(
new CompressionWebpackPlugin({
// 正在匹配需要压缩的文件后缀
test: /\.(js|css|svg|woff|ttf|json|html)$/,
// 大于10kb的会压缩
threshold: 10240
})
)
}
},
}