December 27, 2019
More vue-cli3 version has no vue.config.js files, if you need to use it, we have to configure their own, in this configuration, you can configure the agent to complete the cross-domain issue / use less / sass / stylus preprocessor .
First create a new file in the same directory package.json vue.config.js file, and then write the following code in the file:
// const webpack = require("webpack");
// const Version = new Date().getTime();
const path = require("path");
module.exports = {
/ * URL in a production environment deployment and development environment: the current environment can be distinguished, baseUrl from Vue CLI 3.3 from deprecated, use publicPath * /
/ * BaseUrl: process.env.NODE_ENV === 'production'? './': '/' * /
// publicPath: process.env.NODE_ENV === "production" ? "/public/" : "./",
publicPath: "./",
/ * Output file directory: When npm run build, the directory name of the generated file * /
outputDir: "dist",
/ * Placed generated static resource (js, css, img, fonts) (relative to the outputDir) directory * /
assetsDir: "assets",
/ * File whether to generate sourceMap build production package, false will increase build speed * /
productionSourceMap: false,
/ * By default, generated static resource contains the hash in order to better control cache in their file names, you can set this option by false Ming Haxi to close the file. (False time is to make the original file name does not change) * /
filenameHashing: false,
/ * Save for eslint detects codes * /
lintOnSave: true,
/ * Webpack-dev-server configuration * /
devServer: {
// / * automatically open the browser * /
open: false,
// / * set to 0.0.0.0 can access all the addresses * /
host: "0.0.0.0",
port: 8080,
https: false,
hotOnly: false,
// / * * Use a proxy cross-domain configuration /
proxy: {
"/api": {
target: "http://www.example.org", // target host
changeOrigin: true, // needed for virtual hosted sites
ws: true, // proxy websockets
Pthriawrite: {
"^/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: {
// / * // imports jquery
// plugins: [
// new webpack.ProvidePlugin({
// $: "jquery",
// jQuery: "jquery",
// "windows.jQuery": "jquery"
// })
// ], */
// / * package configuration revision number * /
// output: {
// / * + module name timestamp * /
// filename: `[name].${Version}.js`,
// chunkFilename: `[name].${Version}.js`
// }
// },
css: {
loaderOptions: {
// to sass-loader Delivery Options
sass: {
@ / Is src / alias
// So here assume you have `src / variables.sass` this document
// Note: sass-loader v7, this option name is "data"
prependData: `@import "~@/variables.sass"`
},
// the default option `sass` case while` sass` and `scss` grammar into force at the same time
// because `scss` syntax is internally handled by the sass-loader
// But when `data` configuration options
// `scss` syntax statement must be asked at the end semicolon,` sass` must not require a semicolon
// In this case, we can use the `scss` option to individually configure the syntax` scss`
scss: {
prependData: `@import "~@/variables.scss";`
},
// passed to the less-loader Less.js related options
less: {
// http://lesscss.org/usage/#less-options-strict-units `Global Variables`
// `primary` is global variables fields name
globalVars: {
primary: "#fff"
}
}
}
},
// global variable configuration uses stylus
chainWebpack: config => {
const types = ["vue-modules", "vue", "normal-modules", "normal"];
types.forEach(type =>
addStyleResource(config.module.rule("stylus").oneOf(type))
);
}
};
// define the function addStyleResource === ====
function addStyleResource(rule) {
rule
.use("style-resource")
.loader("style-resources-loader")
.options({
patterns: [path.resolve (__ dirname, "./src/common/stylus/index.styl")] // followed by the path behind is that you put yourself in public stylus variables path
});
}
Finally, restart the project, through vue-cli3.x build projects where you can use the stylus normal public variables