Vue.js에서 다중 페이지 프로젝트를 구성하는 방법
- 小云云원래의
- 2018-03-10 15:33:422397검색
먼저 다음 명령을 사용하여 새 Vue.js 프로젝트를 만듭니다
vue init webpack vue-3
VsCode를 사용하여 프로젝트를 연 후 명령줄에 프로젝트를 입력하고 관련 종속 라이브러리를 설치한 후 프로젝트를 실행하고 다음 명령을 실행합니다
cd vue-3npm installnpm run dev
일반적인 상황에서는 브라우저에 http://localhost:8080을 입력하면 큰 V 아이콘이 있는 페이지가 팝업됩니다.
위의 준비를 완료한 후 다음으로 다중 페이지 프로젝트의 구성을 구현하겠습니다. 달성할 것으로 예상되는 효과는 다음과 같습니다.
브라우저에 http://localhost:8080/admin을 입력하면 됩니다. 디스플레이 여기 관리자 로그인 페이지로 이동하세요.
프로젝트의 src 디렉토리에 page/login 디렉토리를 생성합니다
그런 다음 로그인 디렉토리 아래에 세 개의 새 폴더를 생성합니다: admin.html admin.js Admin.vueadmin.html admin.js Admin.vue
然后编写相应的页面显示代码，其中
admin.html 中的代码如下
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>管理员登录页面</title></head><body>
<p id="admin"></p></body></html>Admin.vue 中的代码如下
<template>
<p id="admin">
<p>这里是管理员登录页面</p>
</p></template><script>export default {
name: 'Admin'}</script>admin.js 中的代码如下
import Vue from 'vue'import Admin from './Admin.vue'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({
el: '#admin',
components: { Admin },
template: '<Admin/>'})上面显示页面的代码完成之后，开始进行配置工作
首先打开 build目录
在 webpack.base.conf.js文件的 entry 配置属性加上新的入口文件：
module.exports = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js', admin: './src/page/login/admin.js'
},在webpack.dev.conf.js文件的devServer下的 rewrites添加重定向：
devServer: { clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.admin/, to: path.posix.join(config.dev.assetsPublicPath, 'src/indexlogin/admin.html') }, { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},同样要在该文件中的plugins配置项内多配置一个HtmlWebpackPlugin插件，用于生成 admin.html 的入口页
同时添加 chunks ，用于指定在前面 entry对应的入口文件的别名。
plugins: [ new webpack.DefinePlugin({ 'process.env': require('../config/dev.env')
}), new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', chunks:['app'], inject: true
}), new HtmlWebpackPlugin({ filename: 'src/page/login/admin.html', template: 'src/page/login/admin.html', chunks:['admin'], inject: true
}),然后我们找到 config 目录，打开里面的 index.js 文件，在build属性下添加如下代码
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'),
admin: path.resolve(__dirname, '../dist/src/page/login/admin.html'),以上完成所有的配置工作，在命令行重新执行npm run dev ，项目启动后，在浏览器键入 http://localhost:8080/admin ，就成功的跳转到刚刚我们写的页面中去了。
首先使用如下的命令创建一个新的 Vue.js 项目
vue init webpack vue-3
使用 VsCode 打开项目之后，在命令行进入到项目中去，安装相关的依赖库，然后运行项目，执行下面的命令
cd vue-3npm installnpm run dev
在一切正常的情况下，在浏览器输入 http://localhost:8080 应该会弹出一个含有大大的 V 字图标的页面。
完成上面的准备工作之后，接下来我们就来实现多页面项目的配置，我们预期希望实现的效果如下：
在浏览器输入 http://localhost:8080/admin 就会跳转到显示 这里是管理员登录 的页面。
我们在项目的 src 目录下建立 page/login 目录
然后在 login 目录下新建三个文件夹： admin.html admin.js Admin.vue
然后编写相应的页面显示代码，其中
admin.html 中的代码如下
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>管理员登录页面</title></head><body>
<p id="admin"></p></body></html>Admin.vue 中的代码如下
<template>
<p id="admin">
<p>这里是管理员登录页面</p>
</p></template><script>export default {
name: 'Admin'}</script>admin.js 中的代码如下
import Vue from 'vue'import Admin from './Admin.vue'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({
el: '#admin',
components: { Admin },
template: '<Admin/>'})上面显示页面的代码完成之后，开始进行配置工作
首先打开 build目录
在 webpack.base.conf.js文件的 entry 配置属性加上新的入口文件：
module.exports = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js', admin: './src/page/login/admin.js'
},在webpack.dev.conf.js文件的devServer下的 rewrites添加重定向：
devServer: { clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.admin/, to: path.posix.join(config.dev.assetsPublicPath, 'src/indexlogin/admin.html') }, { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},同样要在该文件中的plugins配置项内多配置一个HtmlWebpackPlugin插件，用于生成 admin.html 的入口页
同时添加 chunks ，用于指定在前面 entry对应的入口文件的别名。
plugins: [ new webpack.DefinePlugin({ 'process.env': require('../config/dev.env')
}), new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', chunks:['app'], inject: true
}), new HtmlWebpackPlugin({ filename: 'src/page/login/admin.html', template: 'src/page/login/admin.html', chunks:['admin'], inject: true
}),然后我们找到 config 目录，打开里面的 index.js 文件，在build属性下添加如下代码
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'),
admin: path.resolve(__dirname, '../dist/src/page/login/admin.html'),以上完成所有的配置工作，在命令行重新执行npm run dev
admin.html의 코드는 다음과 같습니다
rrreeeAdmin.vue의 코드는 다음과 같습니다 rrreeeadmin.js의 코드는 다음과 같습니다
rrreee위에 표시된 페이지의 코드는 다음과 같습니다. 완료되면 구성 작업을 시작하세요 먼저 build 디렉터리를 엽니다.
webpack.base.conf.jsentry 구성 속성에 새 항목 파일을 추가합니다. /code> 파일: rrreeewebpack.dev.conf.js 파일의 devServer 아래 rewrites에 리디렉션 추가: rrreee
이 파일의 플러그인 구성 항목에 HtmlWebpackPlugin 플러그인을 하나 더 구성합니다. 이 플러그인은 admin.html🎜의 항목 페이지를 생성하는 데 사용됩니다. , 이전 항목을 지정하려면 청크를 추가하세요. 해당 항목 파일의 별칭입니다. 🎜rrreee🎜그런 다음 config 디렉터리를 찾아 내부에서 index.js 파일을 열고 build 속성 아래에 다음 코드를 추가합니다. 🎜rrreee 🎜🎜위의 모든 구성 작업을 완료하고 명령줄에서 npm run dev를 다시 실행하세요. 프로젝트가 시작된 후 브라우저에 http://localhost:8080/admin을 입력하면 성공합니다. 방금 작성한 페이지로 이동하세요. 🎜🎜먼저 다음 명령을 사용하여 새 Vue.js 프로젝트를 만듭니다🎜rrreee🎜VsCode를 사용하여 프로젝트를 연 후 명령줄에 프로젝트를 입력하고 관련 종속 라이브러리를 설치한 후 프로젝트를 실행하고 다음 명령을 실행합니다🎜rrreee 🎜 일반적인 상황에서는 브라우저에 http://localhost:8080을 입력하면 큰 V 아이콘이 있는 페이지가 팝업됩니다. 🎜🎜🎜위의 준비를 완료한 후 다음으로 다중 페이지 프로젝트의 구성을 구현하겠습니다. 달성할 것으로 예상되는 효과는 다음과 같습니다. 🎜🎜브라우저에 http://localhost:8080/admin을 입력하면 됩니다. 디스플레이 🎜여기 관리자 로그인 🎜 페이지로 이동하세요. 🎜🎜프로젝트의 src 디렉토리에 page/login 디렉토리를 생성합니다🎜그런 다음 로그인 디렉토리 아래에 세 개의 새 폴더를 생성합니다: admin.html admin.js Admin.vue🎜🎜그런 다음 해당 페이지를 작성합니다. 표시 코드 중 🎜admin.html의 코드는 다음과 같습니다 🎜rrreee🎜Admin.vue의 코드는 다음과 같습니다 🎜rrreee🎜admin.js의 코드는 다음과 같습니다 🎜rrreee🎜위에 표시된 페이지의 코드는 다음과 같습니다. 완료되면 구성 작업을 시작하세요 🎜🎜먼저 build 디렉터리를 엽니다. 🎜webpack.base.conf.jsentry 구성 속성에 새 항목 파일을 추가합니다. /code> 파일: 🎜rrreee🎜webpack.dev.conf.js 파일의 devServer 아래 rewrites에 리디렉션 추가: 🎜rrreee🎜 또한 이 파일의 플러그인 구성 항목에 HtmlWebpackPlugin 플러그인을 하나 더 구성합니다. 이 플러그인은 admin.html🎜의 항목 페이지를 생성하는 데 사용됩니다. , 이전 항목을 지정하려면 청크를 추가하세요. 해당 항목 파일의 별칭입니다. 🎜rrreee🎜그런 다음 config 디렉터리를 찾아 내부에서 index.js 파일을 열고 build 속성 아래에 다음 코드를 추가합니다. 🎜rrreee 🎜🎜위의 모든 구성 작업을 완료하고 명령줄에서 npm run dev를 다시 실행하세요. 프로젝트가 시작된 후 브라우저에 http://localhost:8080/admin을 입력하면 성공합니다. 방금 작성한 페이지로 이동하세요. 🎜🎜관련 권장사항: 🎜🎜🎜다중 페이지 애플리케이션을 개발하는 vue-cli의 간단한 예🎜🎜🎜🎜단일 페이지를 여러 페이지 예제 코드로 만드는 Vue-cli 방법🎜🎜🎜🎜Vue-cli를 다음으로 변환하는 방법 여러 페이지 기록 모드 지원🎜🎜위 내용은 Vue.js에서 다중 페이지 프로젝트를 구성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!