vue-cli 别名配置 alias

16 篇文章 1 订阅

vue-cli2

配置

build/webpack.base.conf.js

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'), // 配置路径别名 @/components/HelloWorld
      'assets': resolve('src/assets'),
      'components': resolve('src/components'),
      'views': resolve('src/views')
    }
  },
使用

如果不是使用 import 导入的话 可以加上 ~

<img src="~assets/img/f.png" alt="">
<img src="@/assets/img/f.png" alt="">

vue-cli3

配置

vue.config.js

module.exports = {
 	configureWebpack:{ // 配置webpack
        resolve:{
            // extensions:[], // 后缀名省略配置
            alias:{
                // '@': resolve('./src')  默认配置了

                'common':'@/common',
                'assets':'@/assets',
                'components':'@/components',
                'network':'@/network',
                'views':'@/views'

            }
        }
    }
}
<img src="assets/img/f.png" alt="">
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2和Vue-cli中使用TypeScript需要进行一定的配置。下面是详细的配置步骤: 1. 安装TypeScript和相关依赖 首先需要安装TypeScript和相关依赖: ```bash npm install typescript ts-loader ``` 2. 配置tsconfig.json 在项目的根目录下创建一个tsconfig.json文件,并进行如下配置: ```json { "compilerOptions": { "target": "es5", "module": "es2015", "strict": true, "jsx": "preserve", "moduleResolution": "node", "esModuleInterop": true, "baseUrl": ".", "paths": { "@/*": ["src/*"] } } } ``` 其中的配置项意义如下: - target: 编译后的JavaScript代码的目标版本 - module: 模块化方式 - strict: 开启TypeScript的严格模式 - jsx: 支持使用JSX语法 - moduleResolution: 模块解析方式 - esModuleInterop: 支持导入非ES6模块的默认导出 - baseUrl: 模块解析的基础路径 - paths: 模块解析的别名配置 3. 配置webpack 在webpack.config.js中进行如下配置: ```javascript module.exports = { // ... resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'], alias: { '@': path.resolve(__dirname, 'src') } }, module: { rules: [ { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/] } } ] } // ... } ``` 其中的配置项意义如下: - extensions: 支持解析的文件扩展名 - alias: 模块解析的别名配置 - test: 匹配需要使用ts-loader处理的文件类型 - loader: 使用的loader - exclude: 排除不需要处理的文件夹 - options: ts-loader的配置项 4. 安装Vue的类型声明文件 需要安装Vue的类型声明文件,使得TypeScript能够正确地识别Vue相关的API。 ```bash npm install @types/vue -D ``` 5. 在组件中使用TypeScript 在Vue组件中,需要使用.ts或者.tsx文件作为组件的文件后缀,然后在脚本中使用TypeScript进行编写,例如: ```vue <template> <div>{{ message }}</div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator' @Component export default class HelloWorld extends Vue { message: string = 'Hello, World!' } </script> <style> /* ... */ </style> ``` 这样就可以在Vue2和Vue-cli中使用TypeScript进行开发了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值