mirror of
https://github.com/vuejs/vue-cli.git
synced 2026-05-03 10:32:10 -05:00
chore: merge branch 'master' into dev
This commit is contained in:
Haoqun Jiang
@@ -26,6 +26,7 @@ yarn
|
||||
# if you have the old vue-cli installed globally, you may
|
||||
# need to uninstall it first.
|
||||
cd packages/@vue/cli
|
||||
# before yarn link, you can delete the link in `~/.config/yarn/link/@vue` (see issue: [yarn link error message is not helpful](https://github.com/yarnpkg/yarn/issues/7054))
|
||||
yarn link
|
||||
|
||||
# create test projects in /packages/test
|
||||
|
||||
+35
-59
@@ -145,7 +145,7 @@ Typically, your static website will be hosted on https://yourUserName.gitlab.io/
|
||||
|
||||
|
||||
```javascript
|
||||
// vue.config.js file to be place in the root of your repository
|
||||
// vue.config.js file to be placed in the root of your repository
|
||||
|
||||
module.exports = {
|
||||
publicPath: process.env.NODE_ENV === 'production'
|
||||
@@ -178,6 +178,21 @@ In order to receive direct hits using `history mode` on Vue Router, you need to
|
||||
|
||||
More information on [Netlify redirects documentation](https://www.netlify.com/docs/redirects/#history-pushstate-and-single-page-apps).
|
||||
|
||||
If you are using [@vue/cli-plugin-pwa](https://cli.vuejs.org/core-plugins/pwa.html#vue-cli-plugin-pwa) make sure to exclude the `_redirects` file from being cached by the service worker.
|
||||
To do so, add the following to your `vue.config.js`:
|
||||
```javascript
|
||||
// vue.config.js file to be placed in the root of your repository
|
||||
|
||||
module.exports = {
|
||||
pwa: {
|
||||
workboxOptions: {
|
||||
exclude: [/_redirects/]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
Checkout [workboxOptions](https://cli.vuejs.org/core-plugins/pwa.html#configuration) and [exclude](https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-webpack-plugin.InjectManifest#InjectManifest) for more.
|
||||
|
||||
### Render
|
||||
|
||||
[Render](https://render.com) offers [free static site hosting](https://render.com/docs/static-sites) with fully managed SSL, a global CDN and continuous auto deploys from GitHub.
|
||||
@@ -269,77 +284,38 @@ Please refer to the [Firebase Documentation](https://firebase.google.com/docs/ho
|
||||
|
||||
### Vercel
|
||||
|
||||
This example uses the latest Vercel platform version 2.
|
||||
[Vercel](https://vercel.com/home) is a cloud platform that enables developers to host Jamstack websites and web services that deploy instantly, scale automatically, and requires no supervision, all with zero configuration. They provide a global edge network, SSL encryption, asset compression, cache invalidation, and more.
|
||||
|
||||
1. Install the Vercel CLI:
|
||||
#### Step 1: Deploying your Vue project to Vercel
|
||||
|
||||
```bash
|
||||
npm install -g vercel
|
||||
To deploy your Vue project with a [Vercel for Git Integration](https://vercel.com/docs/git-integrations), make sure it has been pushed to a Git repository.
|
||||
|
||||
# Or, if you prefer a local one
|
||||
npm install vercel
|
||||
```
|
||||
Import the project into Vercel using the [Import Flow](https://vercel.com/import/git). During the import, you will find all relevant [options](https://vercel.com/docs/build-step#build-&-development-settings) preconfigured for you with the ability to change as needed.
|
||||
|
||||
2. Add a `vercel.json` file to your project root:
|
||||
After your project has been imported, all subsequent pushes to branches will generate [Preview Deployments](https://vercel.com/docs/platform/deployments#preview), and all changes made to the [Production Branch](https://vercel.com/docs/git-integrations#production-branch) (commonly "master" or "main") will result in a [Production Deployment](https://vercel.com/docs/platform/deployments#production).
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "my-example-app",
|
||||
"version": 2,
|
||||
"builds": [
|
||||
{
|
||||
"src": "package.json",
|
||||
"use": "@vercel/static-build"
|
||||
}
|
||||
],
|
||||
"routes": [
|
||||
{
|
||||
"src": "/(js|css|img)/.*",
|
||||
"headers": { "cache-control": "max-age=31536000, immutable" }
|
||||
},
|
||||
{ "handle": "filesystem" },
|
||||
{ "src": ".*", "dest": "/" }
|
||||
],
|
||||
"alias": "example.com"
|
||||
}
|
||||
```
|
||||
Once deployed, you will get a URL to see your app live, such as the following: https://vue-example-tawny.vercel.app/.
|
||||
|
||||
If you have different/additional folders, modify the route accordingly:
|
||||
#### Step 2 (optional): Using a Custom Domain
|
||||
|
||||
```diff
|
||||
- {
|
||||
- "src": "/(js|css|img)/.*",
|
||||
- "headers": { "cache-control": "max-age=31536000, immutable" }
|
||||
- }
|
||||
+ {
|
||||
+ "src": "/(js|css|img|fonts|media)/.*",
|
||||
+ "headers": { "cache-control": "max-age=31536000, immutable" }
|
||||
+ }
|
||||
```
|
||||
If you want to use a Custom Domain with your Vercel deployment, you can **Add** or **Transfer in** your domain via your Vercel [account Domain settings.](https://vercel.com/dashboard/domains)
|
||||
|
||||
If your `outputDir` is not the default `dist`, say `build`:
|
||||
To add your domain to your project, navigate to your [Project](https://vercel.com/docs/platform/projects) from the Vercel Dashboard. Once you have selected your project, click on the "Settings" tab, then select the **Domains** menu item. From your projects **Domain** page, enter the domain you wish to add to your project.
|
||||
|
||||
```diff
|
||||
- {
|
||||
- "src": "package.json",
|
||||
- "use": "@vercel/static-build"
|
||||
- }
|
||||
+ {
|
||||
+ "src": "package.json",
|
||||
+ "use": "@vercel/static-build",
|
||||
+ "config": { "distDir": "build" }
|
||||
+ }
|
||||
```
|
||||
Once the domain as been added, you will be presented with different methods for configuring it.
|
||||
|
||||
3. Adding a `now-build` script in `package.json`:
|
||||
#### Deploying a fresh Vue project
|
||||
|
||||
```json
|
||||
"vercel-build": "npm run build"
|
||||
```
|
||||
You can deploy a fresh Vue project, with a Git repository set up for you, with the following Deploy Button:
|
||||
|
||||
To make a deployment, run `vercel`.
|
||||
[](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fvercel%2Fvercel%2Ftree%2Fmaster%2Fexamples%2Fvue)
|
||||
|
||||
If you want your deployment aliased, run `vercel --target production` instead.
|
||||
## References:
|
||||
|
||||
- [Example Source](https://github.com/vercel/vercel/tree/master/examples/vue)
|
||||
- [Official Vercel Guide](https://vercel.com/guides/deploying-vuejs-to-vercel)
|
||||
- [Vercel Deployment Docs](https://vercel.com/docs)
|
||||
- [Vercel Custom Domain Docs](https://vercel.com/docs/custom-domains)
|
||||
|
||||
### Stdlib
|
||||
|
||||
|
||||
@@ -7,9 +7,6 @@ If you have the previous `vue-cli` (1.x or 2.x) package installed globally, you
|
||||
|
||||
::: tip Node Version Requirement
|
||||
Vue CLI 4.x requires [Node.js](https://nodejs.org/) version 8.9 or above (v10+ recommended). You can manage multiple versions of Node on the same machine with [n](https://github.com/tj/n), [nvm](https://github.com/creationix/nvm) or [nvm-windows](https://github.com/coreybutler/nvm-windows).
|
||||
|
||||
As Node.js v8 has reached end-of-life, it's now recommended to use Node.js v10+ for best compatibility.
|
||||
If you have to stay with Node.js v8, please make sure npm v6 is used as the default package manager. (`npm -v` to check the version, and `vue config --set packageManager npm` to set the default package manager.)
|
||||
:::
|
||||
|
||||
To install the new package, use one of the following commands. You need administrator privileges to execute these unless npm was installed on your system through a Node.js version manager (e.g. n or nvm).
|
||||
|
||||
@@ -160,6 +160,11 @@ You can redirect the output into a file for easier inspection:
|
||||
``` bash
|
||||
vue inspect > output.js
|
||||
```
|
||||
By default, `inspect` command will show the output for development config. To see the production configuration, you need to run
|
||||
|
||||
``` bash
|
||||
vue inspect --mode production > output.prod.js
|
||||
```
|
||||
|
||||
Note the output is not a valid webpack config file, it's a serialized format only meant for inspection.
|
||||
|
||||
|
||||
@@ -144,3 +144,20 @@ dist/foo.1.js 5.24 kb 1.64 kb
|
||||
<!-- foo-one 的实现的 chunk 会在用到的时候自动获取 -->
|
||||
<foo-one></foo-one>
|
||||
```
|
||||
|
||||
## 在构建时使用 vuex
|
||||
在构建 [Web Components 组件](#web-components-组件)或[库](#库)时，入口点不是 `main.js` ，而是 `entry-wc.js` 文件，该文件由此生成： https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/commands/build/resolveWcEntry.js
|
||||
|
||||
因此，要在 Web Components 组件的目标中使用 vuex ，你需要在 `App.vue` 中初始化存储 (store):
|
||||
``` js
|
||||
import store from './store'
|
||||
|
||||
// ...
|
||||
|
||||
export default {
|
||||
store,
|
||||
name: 'App',
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -7,9 +7,6 @@ Vue CLI 的包名称由 `vue-cli` 改成了 `@vue/cli`。
|
||||
|
||||
::: tip Node 版本要求
|
||||
Vue CLI 4.x 需要 [Node.js](https://nodejs.org/) v8.9 或更高版本 (推荐 v10 以上)。你可以使用 [n](https://github.com/tj/n)，[nvm](https://github.com/creationix/nvm) 或 [nvm-windows](https://github.com/coreybutler/nvm-windows) 在同一台电脑中管理多个 Node 版本。
|
||||
|
||||
由于 Node.js v8 已不再维护，我们建议使用 Node.js v10 以上的版本，以保证最佳的兼容性。
|
||||
如果暂时无法升级 Node.js 版本，请使用 npm v6 作为默认的包管理工具。（可以用 `npm -v` 检查 npm 版本，然后运行 `vue config --set packageManager npm` 以设置默认包管理工具。）
|
||||
:::
|
||||
|
||||
可以使用下列任一命令安装这个新的包：
|
||||
|
||||
@@ -629,7 +629,7 @@
|
||||
"css": {
|
||||
"modules": {
|
||||
"label": "Enable CSS Modules",
|
||||
"description": "By default, only files that ends in *.module.[ext] are treated as CSS modules. Enabling this will treat all style files as CSS modules."
|
||||
"description": "By default, only files that end with *.module.[ext] are treated as CSS modules. Enabling this will treat all style files as CSS modules."
|
||||
},
|
||||
"extract": {
|
||||
"label": "Extract CSS",
|
||||
|
||||
Reference in New Issue
Block a user