vue路径写法:./和@/的区别

Vue路径./和@的区别及写法
博客介绍了Vue引用路径时的两种写法。./代表相同文件下的绝对路径,而@是在webpack.base.conf.js文件里配置的,默认代表src路径,可通过配置自定义,这两种都是常见的Vue路径写法。

vue在引用路径的时候可以用 ./ 的写法引用如下:

import './api/index'

这个代表在相同文件下绝对路径的意思。项目中还有常见的@用法:

import util from '@/assets/js/util'

这个@是在 webpack.base.conf.js 文件里配置的,找到下面这段话

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/胜利ue.esm.js',
      '@': resolve('src'),
    }
  },

这里的@就代表是 src,所以就在 src 路径下找文件,也可以自己配置,这也是常见的路径写法!

后端跨域@Configuration public class CorsConfig { @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") // 允许所有路径 .allowedOrigins("*") // 允许所有域(生产环境建议修改) .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允许的请求方法 .allowedHeaders("*") // 允许所有请求头 .allowCredentials(true) // 允许携带 Cookie .maxAge(3600); // 1小时内不需要再发送预检请求 } }; } }前端跨域:const { defineConfig } = require('@vue/cli-service') module.exports = { devServer: { proxy: { '/api': { target: 'http://192.168.1.17:8081', // Spring Boot 地址 changeOrigin: true, pathRewrite: { '^/api': '' } } } } } :8080/#/:1 Access to XMLHttpRequest at 'http://192.168.1.17:8081/user/login' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 192.168.1.17:8081/user/login:1 Failed to load resource: net::ERR_FAILED xhr.js:121 Uncaught (in promise) AxiosError handleError @ xhr.js:121 :8080/#/:1 Access to XMLHttpRequest at 'http://192.168.1.17:8081/user/login' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Login.js:11 POST http://192.168.1.17:8081/user/login net::ERR_FAILED dispatchXhrRequest @ xhr.js:206 xhr @ xhr.js:26 dispatchRequest @ dispatchRequest.js:61 _request @ Axios.js:196 request @ Axios.js:49 wrap @ bind.js:9 login @ Login.js:11 submit @ index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/LoginView.vue?vue&type=script&lang=js:88 click @ index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/LoginView.vue?vue&type=template&id=5c6101e4&scoped=true&class=true:56 invokeWithErrorHandling @ vue.runtime.esm.js:3083 invoker @ vue.runtime.esm.js:1884 invokeWithErrorHandling @ vue.runtime.esm.js:3083 Vue.$emit @ vue.runtime.esm.js:3782 handleClick @ element-ui.common.js:9489 invokeWithErrorHandling @ vue.runtime.esm.js:3083 invoker @ vue.runtime.esm.js:1884 original_1._wrapper @ vue.runtime.esm.js:7547 xhr.js:121 Uncaught (in promise) AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …} 报错
09-10
PS D:\All-Project\pointlion-ui\pointlion-ui> npm run dev > jscm@3.8.3 dev > vue-cli-service serve INFO Starting development server... 98% after emitting CopyPlugin WARNING Compiled with 10 warnings 15:19:24 warning in ./src/views/wms/wmsGoods/selectMulGoodsStock.vue?vue&type=style&index=0&id=6369911e&scoped=true&lang=scss Module Warning (from ./node_modules/postcss-loader/src/index.js): Warning (4:3) start value has mixed support, consider using flex-start instead @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/wms/wmsGoods/selectMulGoodsStock.vue?vue&type=style&index=0&id=6369911e&scoped=true&lang=scss 4:14-509 15:3-20:5 16:22-517 @ ./src/views/wms/wmsGoods/selectMulGoodsStock.vue?vue&type=style&index=0&id=6369911e&scoped=true&lang=scss @ ./src/views/wms/wmsGoods/selectMulGoodsStock.vue @ ./src/views sync ^\.\/.*$ @ ./src/store/modules/permission.js @ ./src/store/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:81&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src/views/am/amBrowse/index.vue?vue&type=template&id=d81b321c&scoped=true Module Warning (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) <el-breadcrumb-item v-for="bread in breadList">: component lists rendered with v-for should have explicit keys. See https://v2.vuejs.org/v2/guide/list.html#key for more info. @ ./src/views/am/amBrowse/index.vue?vue&type=template&id=d81b321c&scoped=true 1:0-545 1:0-545 @ ./src/views/am/amBrowse/index.vue @ ./src/views sync ^\.\/.*$ @ ./src/store/modules/permission.js @ ./src/store/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:81&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src/views/hrm/socialInsncData/index.vue?vue&type=template&id=4f54c0ed&scoped=true Module Warning (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) <el-card v-for="month in dataList">: component lists rendered with v-for should have explicit keys. See https://v2.vuejs.org/v2/guide/list.html#key for more info. @ ./src/views/hrm/socialInsncData/index.vue?vue&type=template&id=4f54c0ed&scoped=true 1:0-545 1:0-545 @ ./src/views/hrm/socialInsncData/index.vue @ ./src/views sync ^\.\/.*$ @ ./src/store/modules/permission.js @ ./src/store/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:81&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src/views/hrm/salaryData/index.vue?vue&type=template&id=2edaa11d Module Warning (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) <el-col v-for="item in type.salaryItemConfigList">: component lists rendered with v-for should have explicit keys. See https://v2.vuejs.org/v2/guide/list.html#key for more info. @ ./src/views/hrm/salaryData/index.vue?vue&type=template&id=2edaa11d 1:0-533 1:0-533 @ ./src/views/hrm/salaryData/index.vue @ ./src/views sync ^\.\/.*$ @ ./src/store/modules/permission.js @ ./src/store/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:81&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src/views/hrm/staffEvaluate/index.vue?vue&type=template&id=4ae0f374&scoped=true Module Warning (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) <el-form-item v-for="item in dict.type.staff_evaluate_item">: component lists rendered with v-for should have explicit keys. See https://v2.vuejs.org/v2/guide/list.html#key for more info. @ ./src/views/hrm/staffEvaluate/index.vue?vue&type=template&id=4ae0f374&scoped=true 1:0-545 1:0-545 @ ./src/views/hrm/staffEvaluate/index.vue @ ./src/views sync ^\.\/.*$ @ ./src/store/modules/permission.js @ ./src/store/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:81&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src/views/hrm/salaryData/index.vue?vue&type=template&id=2edaa11d Module Warning (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) <el-table-column v-for="item in type.salaryItemConfigList">: component lists rendered with v-for should have explicit keys. See https://v2.vuejs.org/v2/guide/list.html#key for more info. @ ./src/views/hrm/salaryData/index.vue?vue&type=template&id=2edaa11d 1:0-533 1:0-533 @ ./src/views/hrm/salaryData/index.vue @ ./src/views sync ^\.\/.*$ @ ./src/store/modules/permission.js @ ./src/store/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:81&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src/views/hrm/salaryData/index.vue?vue&type=template&id=2edaa11d Module Warning (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) <el-table-column v-for="type in salaryConfigList">: component lists rendered with v-for should have explicit keys. See https://v2.vuejs.org/v2/guide/list.html#key for more info. @ ./src/views/hrm/salaryData/index.vue?vue&type=template&id=2edaa11d 1:0-533 1:0-533 @ ./src/views/hrm/salaryData/index.vue @ ./src/views sync ^\.\/.*$ @ ./src/store/modules/permission.js @ ./src/store/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:81&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src/views/am/amArchive/index.vue?vue&type=template&id=40c5f930 Module Warning (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) <el-tag v-for="item in (scope.row.groupId?scope.row.groupId.split(','):[])">: component lists rendered with v-for should have explicit keys. See https://v2.vuejs.org/v2/guide/list.html#key for more info. @ ./src/views/am/amArchive/index.vue?vue&type=template&id=40c5f930 1:0-533 1:0-533 @ ./src/views/am/amArchive/index.vue @ ./src/views sync ^\.\/.*$ @ ./src/store/modules/permission.js @ ./src/store/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:81&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src/views/workflow/flow/flowinfoTimeLine.vue?vue&type=template&id=0e1dc530&scoped=true Module Warning (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) <el-timeline-item v-for="item in hisList">: component lists rendered with v-for should have explicit keys. See https://v2.vuejs.org/v2/guide/list.html#key for more info. @ ./src/views/workflow/flow/flowinfoTimeLine.vue?vue&type=template&id=0e1dc530&scoped=true 1:0-556 1:0-556 @ ./src/views/workflow/flow/flowinfoTimeLine.vue @ ./src/views sync ^\.\/.*$ @ ./src/store/modules/permission.js @ ./src/store/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:81&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js warning in ./src/views/im/pointlion-chat/iconfont/demo_index.html Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders > <!DOCTYPE html> | <html> | <head> @ ./src/views sync ^\.\/.*$ @ ./src/store/modules/permission.js @ ./src/store/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:81&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js App running at: - Local: http://localhost:81/ - Network: unavailable Note that the development build is not optimized. To create a production build, run npm run build. node:events:491 throw er; // Unhandled 'error' event ^ Error: spawn cmd ENOENT at Process.ChildProcess._handle.onexit (node:internal/child_process:285:19) at onErrorNT (node:internal/child_process:485:16) at processTicksAndRejections (node:internal/process/task_queues:83:21) Emitted 'error' event on ChildProcess instance at: at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12) at onErrorNT (node:internal/child_process:485:16) at processTicksAndRejections (node:internal/process/task_queues:83:21) { errno: -4058, code: 'ENOENT', syscall: 'spawn cmd', path: 'cmd', spawnargs: [ '/c', 'start', '""', '/b', 'http://localhost:81/' ] } PS D:\All-Project\pointlion-ui\pointlion-ui>
最新发布
10-28
评论 6
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值