2019年12月27日
vue-cli3以上的版本就已經沒有vue.config.js文件了,如果需要使用的話,得我們自己配置,在該配置中,可以完成配置代理跨域/使用less/sass/stylus預處理器的問題.
首先在package.json文件的同級目錄中新建一個vue.config.js文件,然后在該文件中寫入以下代碼:
// const webpack = require("webpack");
// const Version = new Date().getTime();
const path = require("path");
module.exports = {
/* 部署生產環境和開發環境下的URL：可對當前環境進行區分，baseUrl 從 Vue CLI 3.3 起已棄用，要使用publicPath */
/* baseUrl: process.env.NODE_ENV === 'production' ? './' : '/' */
// publicPath: process.env.NODE_ENV === "production" ? "/public/" : "./",
publicPath: "./",
/* 輸出文件目錄：在npm run build時，生成文件的目錄名稱 */
outputDir: "dist",
/* 放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄 */
assetsDir: "assets",
/* 是否在構建生產包時生成 sourceMap 文件，false將提高構建速度 */
productionSourceMap: false,
/* 默認情況下，生成的靜態資源在它們的文件名中包含了 hash 以便更好的控制緩存，你可以通過將這個選項設為 false 來關閉文件名哈希。(false的時候就是讓原來的文件名不改變) */
filenameHashing: false,
/* 代碼保存時進行eslint檢測 */
lintOnSave: true,
/* webpack-dev-server 相關配置 */
devServer: {
// /* 自動打開瀏覽器 */
open: false,
// /* 設置為0.0.0.0則所有的地址均能訪問 */
host: "0.0.0.0",
port: 8080,
https: false,
hotOnly: false,
// /* 使用代理配置跨域 */
proxy: {
"/api": {
target: "http://www.example.org", // target host
changeOrigin: true, // needed for virtual hosted sites
ws: true, // proxy websockets
pathRewrite: {
"^/api/old-path": "/api/new-path", // rewrite path
"^/api/remove/path": "/path" // remove base path
},
router: {
// when request.headers.host == 'dev.localhost:3000',
// override target 'http://www.example.org' to 'http://localhost:8000'
"dev.localhost:3000": "http://localhost:8000"
}
}
}
},
// configureWebpack: {
// /* //引入jquery
// plugins: [
// new webpack.ProvidePlugin({
// $: "jquery",
// jQuery: "jquery",
// "windows.jQuery": "jquery"
// })
// ], */
// /*打包配置版本號*/
// output: {
// /*模塊名稱+時間戳*/
// filename: `[name].${Version}.js`,
// chunkFilename: `[name].${Version}.js`
// }
// },
css: {
loaderOptions: {
// 給 sass-loader 傳遞選項
sass: {
// @/ 是 src/ 的別名
// 所以這里假設你有 `src/variables.sass` 這個文件
// 注意：在 sass-loader v7 中，這個選項名是 "data"
prependData: `@import "~@/variables.sass"`
},
// 默認情況下 `sass` 選項會同時對 `sass` 和 `scss` 語法同時生效
// 因為 `scss` 語法在內部也是由 sass-loader 處理的
// 但是在配置 `data` 選項的時候
// `scss` 語法會要求語句結尾必須有分號，`sass` 則要求必須沒有分號
// 在這種情況下，我們可以使用 `scss` 選項，對 `scss` 語法進行單獨配置
scss: {
prependData: `@import "~@/variables.scss";`
},
// 給 less-loader 傳遞 Less.js 相關選項
less: {
// http://lesscss.org/usage/#less-options-strict-units `Global Variables`
// `primary` is global variables fields name
globalVars: {
primary: "#fff"
}
}
}
},
// 配置使用stylus全局變量
chainWebpack: config => {
const types = ["vue-modules", "vue", "normal-modules", "normal"];
types.forEach(type =>
addStyleResource(config.module.rule("stylus").oneOf(type))
);
}
};
// ====定義函數addStyleResource===
function addStyleResource(rule) {
rule
.use("style-resource")
.loader("style-resources-loader")
.options({
patterns: [path.resolve(__dirname, "./src/common/stylus/index.styl")] //
后面跟着的路徑改成你自己放公共stylus變量的路徑
});
}
最后重新啟動項目,通過vue-cli3.x搭建的項目里就可以正常使用stylus的公共變量了
注意:一定要將該配置文件代碼中的配置公共stylus變量的路徑改成你自己的路徑(想偷懶,拿來就用是初學者最容易犯的錯誤).