报错:<br/>Uncaught TypeError: Failed to resolve module specifier "loadsh". Relative references must start with either "/", "./", or "../".<br/>浏览器原生解析路径的问题,所以换一下引入方式<br/>node_modules中找到lodash-es,找到她的package,json,查看找到 "main": "lodash.js"
控制台会显示 user --host to expose(使用 --host 暴露网络) <br/><br/>解决方法:
1. 在根目录下的 vite.config.js 文件中添加以下内容
```jsx
importvuefrom'@vitejs/plugin-vue'
/**
* https://vitejs.dev/config/
* @type {import('vite').UserConfig}
*/
exportdefault{
plugins:[vue()],
server:{// ← ← ← ← ← ←
host:'0.0.0.0'// ← 新增内容 ←
}// ← ← ← ← ← ←
}
```
2. 通过 Vite CLI 配置
执行 npx vite --host 0.0.0.0 命令后,就可以通过 http://10.56.116.128:3000/ 访问了。
3. 修改npm 脚本
修改 package.json 文件中 scripts 节点下的脚本,如下
```jsx
"scripts":{
"dev":"vite --host 0.0.0.0",
"build":"vite build",
"serve":"vite preview --host 0.0.0.0"
}
```
<aname="R0yEc"></a>
## 3.2 项目目录
```jsx
|-node_modules--项目依赖包的目录
|-public--项目公用文件
|--favicon.ico--网站地址栏前面的小图标
|-src--源文件目录,程序员主要工作的地方
|-assets--静态文件目录,图片图标,比如网站logo
|-components--Vue3.x的自定义组件目录
|--App.vue--项目的根组件,单页应用都需要的
|--index.css--一般项目的通用CSS样式写在这里,main.js引入
|--main.js--项目入口文件,SPA单页应用都需要入口文件
|--.gitignore--git的管理配置文件,设置那些目录或文件不管理
|--index.html--项目的默认首页,Vue的组件需要挂载到这个文件上
|--package-lock.json--项目包的锁定文件,用于防止包版本不一样导致的错误
|--package.json--项目配置文件,包管理、项目名称、版本和命令
|--vite.config.js--配置文件
```
<aname="mLpTv"></a>
## 3.3 vite插件
Vite 旨在为常见的 web 开发工作提供开箱即用的支持。你可以使用插件进行扩展功能。<br/>地址:[https://github.com/vitejs/awesome-vite#plugins](https://github.com/vitejs/awesome-vite#plugins)<br/>例如:为传统浏览器提供支持
npm init :初始化一个简单的package.json文件,执行该命令后终端会依次询问 name, version, description 等字段<br/>查询[文档](https://docs.npmjs.com/cli/v7/commands/npm-init)得知:<br/>`**npm init <initializer>**`**:**can be used to set up a new or existing npm package.(可以用来建立一个新的或现有的NPM包)
<aname="oLGN9"></a>
## 4.2 npm init <initializer>
initializer in this case is an npm package named create-<initializer>, which will be installed by [npm-exec](https://docs.npmjs.com/cli/v7/commands/npm-exec), and then have its main bin executed -- presumably creating or updating package.json and running any other initialization-related operations.<br/>(initializer 在这种情况下是一个名为 create-<initializer> 的 npm 包,这个包将由 [npm-exec](https://link.juejin.cn?target=https%3A%2F%2Fdocs.npmjs.com%2Fcli%2Fv7%2Fcommands%2Fnpm-exec)(也就是**npx**) 来安装,然后执行 package.json 中 bin 属性对应的脚本,运行任何其他与初始化相关的操作。