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变量的路径改成你自己的路径(想偷懒,拿来就用是初学者最容易犯的错误).