avatar

Detailed explanation of vue vue.config.js configuration?

Detailed explanation of vue vue.config.js configuration?

bounty icon
$10
Single winner
Asked  4 months ago
Viewed  0 times

In the new version of vue scaffolding, webpack has been encapsulated and cannot be seen, and vue.config.js is required to replace configuration, I want a detailed explanation of vue.config.js configuration.

  • add comment
avatar
let path = require('path')
function resolve (dir) {
   return path.join(__dirname, dir)
}
module.exports = {
publicPath:'/exp', //The basic URL when deploying the application package. The usage is consistent with the output.publicPath of webpack itself
outputDir:'dist3', //Package path address, Default:'dist', instead of output.path
assetsDir:'assets1', //Place the generated static resources (js, css, img, fonts) (relative to outputDir) directory
indexPath:'test.html' ,//The output address of the static template file
filenameHashing: true, //Whether the generated static file needs to have a hash
// // Needed for multi-page development
// pages:{
// index: {
// // The entrance to the page
// entry:'src/index/main.js',
// // template source
// template:'public/index.html',
// // output in dist/index.html
// filename:'index.html',
// // When using the title option,
// // The title tag in the template needs to be <title><%= htmlWebpackPlugin.options.title %></title>
// title:'Index Page',
// // Blocks included in this page, will include by default
// // Extracted general chunk and vendor chunk.
// chunks: ['chunk-vendors','chunk-common','index']
// },
// // When using an entry-only string format,
// // The template will be deduced as `public/subpage.html`
// // And if it is not found, fall back to `public/index.html`.
// // The output file name will be deduced as `subpage.html`.
// subpage:'src/subpage/main.js'
// },
// runtimeCompiler:false, // Setting it to true will allow you to use template options in Vue components, but will bring about 10 KB of additional load to your application.
// productionSourceMap:false,
// // configureWebpack: {
// // plugins: [
// // new MyAwesomeWebpackPlugin()
// //]
// //}
chainWebpack: config => {
    Config.resolve.alias.set('@', resolve('src'))
  },
css:{
extract:true, //css extract
sourceMap: true, // source map
},
devServer: {
host:'0.0.0.0',
port:'8090',
https:true,
// Visit: http://localhost:8090/api/info
// Proxy to http://localhost:8081/api/info
// The real interface address: http://localhost:8081/new/api/info
proxy: {
'^/api': {
target:'http://localhost:8081',
ws: true,
changeOrigin: true,
pathRewrite: {'^/api':'/new/api'}
// pathRewrite: {'^/old/api':'/new/api'}
},
'^/foo': {
target:'http://localhost:8081'
}
}
},
parallel:4, //Whether to use multiple threads for compression
// // pwa://offline cache configuration, pass options to PWA plugin.
lintOnSave:false //No need for eslint verification
}
  • Taken
  • add comment
  • 0
Sign In
Sign In
avatar

Detailed explanation of vue vue.config.js configuration?

Detailed explanation of vue vue.config.js configuration?

bounty icon
$10
Single winner
Asked  4 months ago
Viewed  0 times

In the new version of vue scaffolding, webpack has been encapsulated and cannot be seen, and vue.config.js is required to replace configuration, I want a detailed explanation of vue.config.js configuration.

  • add comment
avatar
let path = require('path')
function resolve (dir) {
   return path.join(__dirname, dir)
}
module.exports = {
publicPath:'/exp', //The basic URL when deploying the application package. The usage is consistent with the output.publicPath of webpack itself
outputDir:'dist3', //Package path address, Default:'dist', instead of output.path
assetsDir:'assets1', //Place the generated static resources (js, css, img, fonts) (relative to outputDir) directory
indexPath:'test.html' ,//The output address of the static template file
filenameHashing: true, //Whether the generated static file needs to have a hash
// // Needed for multi-page development
// pages:{
// index: {
// // The entrance to the page
// entry:'src/index/main.js',
// // template source
// template:'public/index.html',
// // output in dist/index.html
// filename:'index.html',
// // When using the title option,
// // The title tag in the template needs to be <title><%= htmlWebpackPlugin.options.title %></title>
// title:'Index Page',
// // Blocks included in this page, will include by default
// // Extracted general chunk and vendor chunk.
// chunks: ['chunk-vendors','chunk-common','index']
// },
// // When using an entry-only string format,
// // The template will be deduced as `public/subpage.html`
// // And if it is not found, fall back to `public/index.html`.
// // The output file name will be deduced as `subpage.html`.
// subpage:'src/subpage/main.js'
// },
// runtimeCompiler:false, // Setting it to true will allow you to use template options in Vue components, but will bring about 10 KB of additional load to your application.
// productionSourceMap:false,
// // configureWebpack: {
// // plugins: [
// // new MyAwesomeWebpackPlugin()
// //]
// //}
chainWebpack: config => {
    Config.resolve.alias.set('@', resolve('src'))
  },
css:{
extract:true, //css extract
sourceMap: true, // source map
},
devServer: {
host:'0.0.0.0',
port:'8090',
https:true,
// Visit: http://localhost:8090/api/info
// Proxy to http://localhost:8081/api/info
// The real interface address: http://localhost:8081/new/api/info
proxy: {
'^/api': {
target:'http://localhost:8081',
ws: true,
changeOrigin: true,
pathRewrite: {'^/api':'/new/api'}
// pathRewrite: {'^/old/api':'/new/api'}
},
'^/foo': {
target:'http://localhost:8081'
}
}
},
parallel:4, //Whether to use multiple threads for compression
// // pwa://offline cache configuration, pass options to PWA plugin.
lintOnSave:false //No need for eslint verification
}
  • Taken
  • add comment
  • 0