您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
VueJS-跨域_骨架屏插件、预渲染、多页应用-多页应用
发布时间：2020-05-24 18:32:27编辑：雪饮阅读（）
多页应用
先初始化一个项目
C:\Users\xy>vue init webpack 02_mutipart_page_app
多项目准备
然后src目录下全部删除并新建project目录并在project目录分别建立goods目录和user目录，假定我们有这两个项目目录结构如下，虽然两个项目主要区别核心也就这三处
Goods/App.vue
<template>
<div>
商品的APP
<router-view/>
</div>
</template>
<script>
export default {
data(){
return {
}
}
}
</script>
<style>
</style>
User/App.vue
<template>
<div>
用户的APP
<router-view/>
</div>
</template>
<script>
export default {
data(){
return {
}
}
}
</script>
<style>
</style>
G.vue
<template>
<div>
我是商品的路由组件
<a href="/user.index.html">去用户页面</a>
</div>
</template>
<script>
export default {
data(){
return {
}
}
}
</script>
<style>
</style>
U.vue
<template>
<div>
我是user的路由组件
<a href="/goods.index.html">去商品页面</a>
</div>
</template>
<script>
export default {
data(){
return {
}
}
}
</script>
<style>
</style>
Goods/index.js
import Vue from 'vue'
import Router from 'vue-router'
import G from './G'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/g',
name: 'G',
component: G
}
]
})
user/index.js
import Vue from 'vue'
import Router from 'vue-router'
import U from './U'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/u',
name: 'U',
component: U
}
]
})
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>02_multipart_page_app</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './index'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
多项目配置
然后在build/webpack.base.conf.js中增加配置如
const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
})
module.exports = {
context: path.resolve(__dirname, '../'),
// 相对于项目根目录
entry: {
user: './src/projects/user/main.js',
goods:'./src/projects/goods/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
生产环境配置
在webpack.prod.conf.js增加配置如
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
// Setting the following option to `false` will not extract CSS from codesplit chunks.
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
allChunks: true,
}),
new HtmlWebpackPlugin({
filename: 'user.index.html',
template: path.join(__dirname,'../src/projects/user/index.html'),
inject: true,
// 入口实际就是entry的key
chunks:['manifest','vendor','user'],
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
}),
new HtmlWebpackPlugin({
filename: 'goods.index.html',
template: path.join(__dirname,'../src/projects/goods/index.html'),
inject: true,
// 入口实际就是entry的key
chunks:['manifest','vendor','goods'],
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
}),
开发dev配置
在webpack.dev.conf.js增加配置如
new webpack.NoEmitOnErrorsPlugin(),
new HtmlWebpackPlugin({
filename: 'user.index.html',
template: path.join(__dirname,'../src/projects/user/index.html'),
inject: true,
// 入口实际就是entry的key
chunks:['manifest','vendor','user'],
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
}),
new HtmlWebpackPlugin({
filename: 'goods.index.html',
template: path.join(__dirname,'../src/projects/goods/index.html'),
inject: true,
// 入口实际就是entry的key
chunks:['manifest','vendor','goods'],
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
}),
配置服务器
像之前的项目一样，我们给该多项目配置一个服务器，由于
我们这里是多项目，总该有一个默认项目被直接打开站点可以访问，就以user里面的index为默认首页吧，所以nginx配置如
开发环境dev的运行效果
默认npm run dev打开项目就是默认的user-app
按照我们上面的路由配置规则所以加入u后
点击去商品则
再按照路由规则加g则
然后npm run build后将dist目录下的文件拷贝到上面配置的新服务器中再次进行上面测试，没有问题即可。
跨域的开发与生产环境解决方案
依旧初始化一个项目
C:\Users\xy>vue init webpack 03_cross_origin_xy
然后npm install axios安装下axios
然后在main.js中配置axios
import Axios from 'axios'
Vue.config.productionTip = false
Vue.prototype.$axios = Axios
寻找有跨域限制的接口
像如下就是没有跨域限制的接口
一般情况下允许跨域的关键字就是响应头中有类如”allow-origin:*”
那么这里找到一个接口如
http://fc.gaojiupan.cn/api.php
浏览器直接访问返回如
那么我们将该接口在我们app.vue中用axios请求试试
export default {
name: 'App',
created () {
this.$axios.get('http://fc.gaojiupan.cn/api.php')
.then(res => {
console.log(res)
})
.catch(console.log)
}
}
会发现浏览器报了跨域限制问题
开发环境下跨域问题的解决
将该地址配置到config/index.js中的dev端中如
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://fc.gaojiupan.cn/api.php',
pathRewrite: {'^/api' : ''},
changeOrigin:true
}
},
然后app.vue中修改如
created () {
this.$axios.get('/api')
.then(res => {
console.log(res)
})
.catch(console.log)
}
然后重新访问项目
ok开发环境下该跨域问题解决
生产环境跨域问题
我们把项目build后拿到生产环境上再运行试试
生产环境直接给你返回404
开发环境下跨域的解决（服务端）
这里开发环境是nginx，则该站点配置应如下
server {
listen 80;
server_name www.cross.com;
root "D:/phpstudy_pro/WWW/www.cross.com";
location / {
index index.php index.html error/index.html;
error_page 400 /error/400.html;
error_page 403 /error/403.html;
error_page 404 /error/404.html;
error_page 500 /error/500.html;
error_page 501 /error/501.html;
error_page 502 /error/502.html;
error_page 503 /error/503.html;
error_page 504 /error/504.html;
error_page 505 /error/505.html;
error_page 506 /error/506.html;
error_page 507 /error/507.html;
error_page 509 /error/509.html;
error_page 510 /error/510.html;
autoindex off;
}
location /api {
proxy_pass http://fc.gaojiupan.cn/api.php;
}
location ~ \.php(.*)$ {
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_split_path_info ^((?U).+\.php)(/?.+)$;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PATH_INFO $fastcgi_path_info;
fastcgi_param PATH_TRANSLATED $document_root$fastcgi_path_info;
include fastcgi_params;
}
}
其实主要就是这个location是关键
再次访问也是ok的了
关键字词：vue,多页应用,跨域