一、路径别名设置:
vue-cli@2.x:
1 // build/webpack.base.conf.js中: 2 resolve: { 3 extensions: [".js", ".vue", ".json", ".css", ".scss"], 4 alias: { 5 vue$: "vue/dist/vue.esm.js", 6 "@": resolve("src"), 7 'assets': resolve("src/assets"), 8 'styles': resolve("src/assets/styles"), 9 'common': resolve("src/common") 10 } 11 }
vue-cli@4.x:
1 // vue.config.js中: 2 const path = require('path'); 3 module.exports = { 4 chainWebpack: (config) => { 5 config.resolve.alias 6 .set('@', path.join(__dirname, './src')) 7 .set('assets', path.join(__dirname, './src/assets')) 8 .set('common', path.join(__dirname, './src/common')) 9 .set('styles', path.join(__dirname, './src/assets/styles')); 10 } 11 };
二、开发测试路径代理:
vue-cli@2.x:
1 // config/index.js中: 2 module.exports = { 3 dev: { 4 proxyTable: { 5 '/api':{ 6 'target': 'http://192.168.1.105:8080',// 测试线 7 'pathRewrite': { 8 '^/api':'/static/data' 9 } 10 } 11 } 12 }
vue-cli@4.x:
1 // vue.config.js中: 2 module.exports = { 3 devServer: { 4 proxy: { 5 '/api': { 6 target: 'http://192.168.1.105:8080', // 测试线 7 pathRewrite: { 8 '^/api':'/data' 9 }, 10 }, 11 }, 12 }, 13 };