使用
线上示例
命令
# 开发调试
$ npm run dev
# 服务端渲染应用部署
# 构建
$ npm run build
# 启动
$ npm start
# 停止
$ npm stop
应用配置
修改 package.json,将 {app-name} 改成自己的:
"scripts": {
"stop": "pm2 stop {app-name}"
}
修改 processes.json,将 {app-name} 改成自己的:
"apps": [
{
"name": "{app-name}"
}
]
修改 nuxt.config.js
添加全局 CSS:
css: [
'~/assets/styles/global/index.scss'
]
CSS 提取到一个单独的 CSS 文件中:
build: {
extractCSS: true
}
配置 PostCSS autoprefixer:
build: {
postcss: {
preset: {
autoprefixer: {
browsers: ['last 2 versions', '> 5%']
}
}
}
}
配置 CDN:
build: {
publicPath: 'https://my-app.lrcdn.cn'
}
默认首页改为 pages/index/index.vue:
router: {
extendRoutes (routes, resolve) {
routes.splice(routes.findIndex(item => item.name === 'index'), 1, {
name: 'index',
path: '/',
component: resolve(__dirname, 'pages/index/index.vue')
})
routes.splice(routes.findIndex(item => item.name === '404'), 1, {
name: '404',
path: '*',
component: resolve(__dirname, 'pages/404/index.vue')
})
}
}
修改 layouts/default.vue
去掉 <style>。
页面目录规范
|-- page // 页面
| |-- index.vue // 页面入口
| |-- styles // 样式
| |-- index.scss // 样式入口
| |-- images // 样式引用图片
| |-- images // 页面引用图片
组件目录规范
与页面目录规范一致。