配置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
})
)
}
},
}